"UNAGI FIELDS"

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

0.7

Labels

form .field > .label > ...

Labels can become input fields too.

Column

Row

Spaced