Field Set

Name: Boreal UI
Author: Davin Chiupka

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.

SMS

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

Field Set props API
				Default	Description
`actions`	`ReactNode`	No	props	`—`	Optional actions rendered in the fieldset footer.
`actionsClassName`	`string`	No	props	`—`	Additional class name for the actions area.
`bodyClassName`	`string`	No	props	`—`	Additional class name for the grouped control body.
`children`	`ReactNode`	No	props	`—`	Main content rendered inside the component.
`className`	`string`	No	styling	`—`	Additional class name for the component root.
`containerClassName`	`string`	No	props	`—`	Additional class name for the outer label/component container.
`contentClassName`	`string`	No	props	`—`	Additional class name for the content area. Alias for bodyClassName.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`descriptionClassName`	`string`	No	props	`—`	Additional class name for the description text.
`disabled`	`boolean`	No	props	`false`	Whether the component is disabled.
`errorClassName`	`string`	No	props	`—`	Additional class name for error text.
`errorMessage`	`ReactNode`	No	props	`—`	Error message rendered after the grouped controls and announced to assistive technologies.