Field Set

The FieldSet component groups related controls under a semantic legend with helper and validation content.

Usage & Examples

Preferences

Notification preferences

Choose at least one channel.

preferences.tsx
<FieldSet
  legend="Notification preferences"
  helperText="Choose at least one channel."
>
  <CheckBox label="Email" checked onChange={() => {}} />
  <CheckBox label="SMS" checked={false} onChange={() => {}} />
</FieldSet>

Props API

39 props
Columns
Field Set props API
Default
Description
actionsReactNodeNopropsOptional actions rendered in the fieldset footer.
actionsClassNamestringNopropsAdditional class name for the actions area.
bodyClassNamestringNopropsAdditional class name for the grouped control body.
childrenReactNodeNopropsMain content rendered inside the component.
classNamestringNostylingAdditional class name for the component root.
containerClassNamestringNopropsAdditional class name for the outer label/component container.
contentClassNamestringNopropsAdditional class name for the content area. Alias for bodyClassName.
data-testidstringNotestingBackward-compatible alias for test ID attributes.
descriptionReactNodeNopropsDescriptive text rendered beneath the legend and connected with aria-describedby.
descriptionClassNamestringNopropsAdditional class name for the description text.
disabledbooleanNopropsfalseWhether the component is disabled.
errorReactNodeNopropsError message rendered after the grouped controls and announced to assistive technologies.