flora
components.
flora components have no colour of their own. on BG sites, like this one, they're black and white. inside a product we build for others, they take on that product's colour. drag the hue above to try it.
components
forms.
input · select · checkbox · radio · switch
input
label, hint, error
the label sits above in lowercase, the hint or error below. focus draws a 3px soft-accent halo.
sizes
select
native select, flora chrome
use it for 4+ options; tabs or tags read better for fewer.
checkbox
checked, indeterminate, description
the check springs in. indeterminate is for a parent row whose children are partly selected.
radio
column and row
2–5 mutually exclusive options. more than that wants a select.
switch
immediate settings
for settings that apply at once — no save button. the thumb springs and widens on press.