Form
Form provides layout structure for grouping fields, labels, helper text, and actions into a cohesive form experience.
Anatomy
- Form container — wraps all fields with padding, border, and background
- Form group — fieldset with optional legend for related fields
- Form field — single field row: label + input + helper
- Helper text — description or error message below a field
- Form actions — button area for submit/cancel
Options
| Option | Values | Description |
|---|---|---|
| Borderless | true / false | Remove border and background for inline forms |
| Label position | top / side | Per-field label placement |
| Actions align | start / end / stretch | Button alignment in the actions area |
| Invalid | true / false | Marks a field as having a validation error |
Behaviors
Field grouping
Use .form-group with a <fieldset> and <legend> to group related fields. The legend provides an accessible name for the group.
Validation and helper text
Mark a field as invalid with .is-invalid on .form-field. Helper text switches to danger color automatically.
Side labels
Use data-label-position="side" for horizontal label layout. Best suited for wider viewports and settings forms.
Borderless
Use the borderless variant when the form is embedded in a card or modal that already provides its own container.
Usage Guidelines
Do
Group related fields with formGroup and a descriptive title.
Don't
Don't place unrelated fields in the same group or omit labels.
Accessibility
- Form groups use
<fieldset>+<legend>for accessible grouping. - Every input must have an associated
<label>viafor/idpairing. - Required fields are communicated with a visual indicator and
aria-required. - Error messages should be linked to the input via
aria-describedby. - The form uses
novalidateto allow custom validation patterns.
Theming
Form adapts to brands and modes through its component tokens:
| Token | Purpose |
|---|---|
--form-gap |
Spacing between fields |
--form-group-gap |
Spacing between fields in a group |
--form-padding-inline |
Horizontal padding |
--form-padding-block |
Vertical padding |
--form-border-radius |
Container corner radius |
--form-container-background |
Background color |
--form-container-border-color |
Border color |
--form-border-size |
Border width |
--form-field-gap |
Gap between label, input, helper |
--form-field-helper-text-color-default |
Helper text color |
--form-field-helper-text-color-invalid |
Error text color |
--form-group-title-color |
Group legend color |