Forms
In questa pagina verrà descritto come strutturare e stilare un form, con tutti i suoi componenti (input, select, textarea, toggles, ecc)
Input, Select e Textarea
Input text, Select e Textarea saranno circondati da un div.form-control che può avere o meno
una classe associata .has-float. Questa classe stila la label come float, che al :focus ha una transizione verso l'alto.
Senza questa classe, l'eventuale label associata viene visualizzata in alto, sopra al campo, nella maniera tradizionale.
Le select, invece, saranno seguite da un div.select-arrow che mostra la freccia laterale.
Gli input possono presentare un'icona sulla destra e, in questo caso, il div.form-control ha in più
una classe has-icon e l'input sarà seguito da un div-icon con un svg
al suo interno.
Gli input possono anche essere stilati in modo che siano grigi, aggiungendo la classe gray a form-control.
In caso di errore, .form-control avrà la classe .error,
così come il tag span che seguirà l'input, la select o la textarea incriminata.
<div class="form-control">
<label class="text-gray-600 text-sm inline-block leading-8">
Email (no-floating label)
</label>
<input type="..." placeholder="...">
</div>
<div class="form-control gray has-float">
<input type="..." placeholder="...">
<label class="text-gray-600 text-sm inline-block leading-8">
...
</label>
</div>
<div class="form-control has-float">
<input type="..." placeholder="...">
<label class="text-gray-600 text-sm inline-block leading-8">
...
</label>
</div>
<div class="form-control has-icon">
<input type="..." placeholder="...">
<div class="icon">
...
</div>
</div>
<div class="form-control">
<select>
<option >...</option>
<option >...</option>
...
</select>
<div class="select-arrow">
...
</div>
</div>
<div class="form-control has-float">
<textarea placeholder="..."></textarea>
<label>
...
</label>
</div>
<div class="form-control has-float error">
<input type="..." placeholder="...">
<label class="text-gray-600 text-sm inline-block leading-8">
...
</label>
<span class="error">
...
</span>
</div>
Checkbox e radio button
checkbox e radio button sono circondati da una label.form-control-checkradio.
Di default sono block, con una classe display-inline vengono visualizzati inline.
Checkbox toggle
Il toggle è una variante di checkbox, circondato da un div .toggle-control, al cui interno ci sarà uno span
e un checkbox con classe .toggle
Input Upload
Gli input upload sono circondati da un div.form-control-upload, di base hanno flex-direction: column, ma possono diventare orizzontali
con una classe horizontal. La loro larghezza si regola attraverso le utility classes, di default occupano il 100% della larghezza del
loro contenitore
Input range
Prefix / Postfix
I form control possono avere degli add-on che li precedono o li seguono, in più possono essere organizzati in gruppi sulla stessa riga o in blocchi collapsed (senza margini che li separano). La loro ampiezza andrà sempre regolata dalle flex utility classes.
Form grid (flexbox)
Qui sotto c'è un esempio (in effetti con campi decisamente random) di come organizzare un form grid. La griglia in questo caso è costruita con le flex utility classes.
Ogni riga sarà chiusa in un div.flex con un margine orizzontale negativo.