Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  2. Fieldset
  3. Usage

Fieldset

Usage

Fieldset is the accessible grouping primitive for related controls. It is not a visual card: reset styles remove the native fieldset chrome; spacing between fields comes from the caller (FlexBox, Typography, or form layout blocks). The legend, description and error each sit --space-8 above what follows, the shared label gap (control-label-gap), so a SegmentedControl, ButtonGroup or ToggleGroup in a Fieldset needs no spacing of its own. A hidden legend adds no gap. Required legend names the group. Use legendVisibility: Hidden when the name should not show visually; copy still renders inside legend through VisuallyHidden. description and error attach to the group through aria-describedby on the fieldset. For FieldsetType.Group, error meaning comes from the linked error text only. For FieldsetType.RadioGroup, an error also sets aria-invalid="true" on the host (radiogroup supports invalid in ARIA 1.2). disabled uses native fieldset[disabled] so descendants inherit disabled state. Buttons, Fields and SegmentedControls inside it take their disabled paint from that state, icons included (ADR 0015). required ends a visible legend with the same decorative * marker Label uses. The marker is aria-hidden; required semantics live on the controls (native required), and a FieldsetType.RadioGroup host also gets aria-required="true". Explain the marker with a form-level hint, as RadioGroup's requiredHint does. A SegmentedControl inside a Fieldset is named by the legend and, when it is invalid, linked to the group error (aria-errormessage and aria-describedby); it needs no label of its own. type: FieldsetType.RadioGroup sets role="radiogroup" on the host for radio collections. Checkbox groups use CheckboxGroup, which renders the default FieldsetType.Group.
Example
Previous
Field / Accessibility
Next
Fieldset / API and Development
On this page
Example