Components / Controls
Field set
Grouped form fields on a real fieldset: a titled subsection with a hairline above, and fields laid out with the house gap.
@fabrials/ui
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { FieldSet, FieldLegend, FieldGroup } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
FieldSet disabled | boolean | Disables every native control inside. Base UI checkboxes and switches are not native: disable those yourself. |
FieldLegend variant | title | label | A subsection title (16px) or a small group name (14px). |
FieldLegend divider | boolean | The hairline above, drawn on the legend and left out when the fieldset is the first of its container. On by default. |
FieldGroup layout | stack | columns | columns flows fields into as many columns of at least 15rem as the container has room for. |
Behavior
A fieldset never overflows its column (min-inline-size 0). Hide a legend the design does not show with className="fui-sr-only". Field, the label-and-error wrapper, is a different piece.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.