Usage #
Examples #
Basic #
A simple Fieldset is created with a legend property along with the content as children.
Toggleable #
Content of the fieldset can be expanded and collapsed using the toggleable property.
Controlled #
The collapsed property with two-way binding controls the open state programmatically.
Indicator #
The toggleicon slot customizes the indicator. It can switch between two icons using the collapsed context variable, or render a single icon that animates purely with CSS by targeting the toggle button's aria-expanded state.
Match open / closed
CSS-only with data attributes
Accessibility #
Screen Reader
Fieldset component uses the semantic fieldset element. When toggleable option is enabled, a clickable element with button role is included inside the legend element, this button has aria-controls to define the id of the content section along with aria-expanded for the visibility state. The value to read the button defaults to the value of the legend property and can be customized by defining an aria-label or aria-labelledby via the toggleButtonProps property.
The content uses region, defines an id that matches the aria-controls of the content toggle button and aria-labelledby referring to the id of the header.
Content Toggle Button Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the next the focusable element in the page tab sequence. |
| shift + tab | Moves focus to the previous the focusable element in the page tab sequence. |
| enter | Toggles the visibility of the content. |
| space | Toggles the visibility of the content. |