Unagi Fields
A catalog of form field styles.
Each form field contains a label and a container of two identical input elements showing the container classes.
Column
form .field.column > ...
.input:not(.column)
.input.column
Row
form .field.row > ...
.input:not(.column)
.input.column
Spaced
form .field.row.space-between > ...
.input:not(.column)
.input.column
Switch
form .field.switch > ...
Switch form fields are designed primarily for checkboxes and radio buttons, but can also be used for free-form elements (meaning neither column nor row, and they must be without a label). Having two or more inputs in a switch form field is odd, so each field contains only one.
The switch form fields with the radio buttons and free-form elements are
contained within group containers (.group
) to achieve their
horizontal flow.
Checkbox
Radio
Free-form
Labels
form .field > .label > ...
Labels can become input fields too.