Field
Wrapper for form controls. Vertical, horizontal, or responsive orientation, with companion components (FieldLabel, FieldDescription, FieldError, FieldGroup, FieldSet) for every layout need.
Basic
Standard layout: FieldLabel above, control in the middle, FieldDescription below.
We use this to send important account updates.
Error state
Set data-invalid on Field, aria-invalid on the control, then use FieldError for the message.
Username is required.
Horizontal orientation
Label and control on one row. Suits short forms and setting toggles.
FieldSet and FieldGroup
Wrap related fields together. FieldLegend gives the section a heading; FieldGroup is a vertical container between fields.
API Reference
Props, events, and slots for each sub-component.
Field
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "vertical" | "horizontal" | "responsive" | "vertical" | Layout direction. Responsive switches to horizontal at the md breakpoint. |
| data-invalid | boolean | — | HTML attribute. Set true to apply destructive colors to label and children. |
FieldLabel / FieldDescription / FieldError
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| for | string | — | On FieldLabel, same as the native HTML for attribute. Must match the control id. |
FieldSet / FieldGroup / FieldLegend
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Wrapper for a group of related fields with an optional heading. |