Fieldsibling
Contains Field componentsFieldset
Groups related form fields with an accessible legend. Use to organize forms into logical sections.
Setup
import { Fieldset } from '@fragments-sdk/ui';Examples
Two-column layout
Fieldset with Grid for side-by-side fields
Loading preview...
Mixed controls
Fieldset with textarea, select, and checkbox
Loading preview...
With Description
Fieldset with descriptive helper text below the legend
Loading preview...
Disabled
Disabled fieldset prevents interaction with all children
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Fieldset content including Fieldset.Legend and form fields |
disabled | boolean | Not set | Disables all fields within the fieldset |
Usage Guidelines
When to use
- Grouping related fields in a form (e.g., address, personal info)
- Disabling a group of fields together
- Providing an accessible group label for screen readers
When not to use
- Generic visual grouping (use Card)
- Single field wrapping (use Field)
Best practices
- Always include a Fieldset.Legend for accessibility
- Use disabled prop to disable all fields within the group
- Use Grid inside Fieldset for multi-column layouts
- Fieldset.Legend forwards DOM props for ids, aria attributes, and custom data hooks
Accessibility
- Renders semantic fieldset element
- Legend provides accessible group label
- Disabled state propagates to all child fields