Form layouts
Fields that flow into columns, fieldsets that group them, and a sticky action bar for long forms.
Examples
Form grid
Fieldset
Action bar
Anatomy
.form-grid | Auto-fit grid: as many columns as fit at a 14rem minimum, one column on narrow screens. |
> .field | Fields flow into the columns in source order. |
> [data-span=full] | Takes the whole row: a wide field, or the buttons. |
fieldset | Groups related controls in a column with a gap. No border, no padding. |
> legend | The group's caption: small and medium-weight, like a field label. |
.action-bar | Frosted bar, sticky at the bottom of its scroll container, with a hairline above. Buttons sit at the end. |
API
| Attribute | Values | Description |
|---|---|---|
data-span | full | On a child of .form-grid: spans every column. |
disabled | boolean | On a <fieldset>: native; disables every control inside it. |
Accessibility
- Group radio buttons and related checkboxes in a
<fieldset>with a<legend>: the legend is announced as the group's name. - The grid reorders nothing; tab order follows the source, so write the fields in reading order.
- Put the action bar after the fields in the source so it is reached last, as it is seen. It is hidden when printing.