Fieldset
Fieldset is a grouping component with a content toggle feature.
Import #
import { FieldsetModule } from 'primeng/fieldset';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 toggleable option, default state is defined with collapsed option.
Template #
Header section can also be defined with custom content instead of primitive values.
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. |
