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>

Visual variants

Themes

primary
Notification preferences

Choose at least one channel.

secondary
Notification preferences

Choose at least one channel.

tertiary
Notification preferences

Choose at least one channel.

quaternary
Notification preferences

Choose at least one channel.

States

success
Notification preferences

Choose at least one channel.

warning
Notification preferences

Choose at least one channel.

error
Notification preferences

Choose at least one channel.

info
Notification preferences

Choose at least one channel.

Variants

solid
Notification preferences

Choose at least one channel.

outline
Notification preferences

Choose at least one channel.

glass
Notification preferences

Choose at least one channel.

Rounding

none
Notification preferences

Choose at least one channel.

medium
Notification preferences

Choose at least one channel.

large
Notification preferences

Choose at least one channel.

Shadows

none
Notification preferences

Choose at least one channel.

light
Notification preferences

Choose at least one channel.

strong
Notification preferences

Choose at least one channel.

visual-variants.tsx
// Themes
<FieldSet theme="primary"
    legend="Notification preferences"
    helperText="Choose at least one channel."
  >
    <CheckBox label="Email" checked onChange={() => {}} />
    <CheckBox label="SMS" checked={false} onChange={() => {}} />
  </FieldSet>
<FieldSet theme="secondary"
    legend="Notification preferences"
    helperText="Choose at least one channel."
  >
    <CheckBox label="Email" checked onChange={() => {}} />
    <CheckBox label="SMS" checked={false} onChange={() => {}} />
  </FieldSet>
<FieldSet theme="tertiary"
    legend="Notification preferences"
    helperText="Choose at least one channel."
  >
    <CheckBox label="Email" checked onChange={() => {}} />
    <CheckBox label="SMS" checked={false} onChange={() => {}} />
  </FieldSet>
<FieldSet theme="quaternary"
    legend="Notification preferences"
    helperText="Choose at least one channel."
  >
    <CheckBox label="Email" checked onChange={() => {}} />
    <CheckBox label="SMS" checked={false} onChange={() => {}} />
  </FieldSet>

// States
<FieldSet state="success"
    legend="Notification preferences"
    helperText="Choose at least one channel."
  >
    <CheckBox label="Email" checked onChange={() => {}} />
    <CheckBox label="SMS" checked={false} onChange={() => {}} />
  </FieldSet>
<FieldSet state="warning"
    legend="Notification preferences"
    helperText="Choose at least one channel."
  >
    <CheckBox label="Email" checked onChange={() => {}} />
    <CheckBox label="SMS" checked={false} onChange={() => {}} />
  </FieldSet>
<FieldSet state="error"
    legend="Notification preferences"
    helperText="Choose at least one channel."
  >
    <CheckBox label="Email" checked onChange={() => {}} />
    <CheckBox label="SMS" checked={false} onChange={() => {}} />
  </FieldSet>
<FieldSet state="info"
    legend="Notification preferences"
    helperText="Choose at least one channel."
  >
    <CheckBox label="Email" checked onChange={() => {}} />
    <CheckBox label="SMS" checked={false} onChange={() => {}} />
  </FieldSet>

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

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

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

Interaction states

Disabled
Notification preferences

Choose at least one channel.

Loading
Notification preferences

Choose at least one channel.

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

Props API

38 props
Columns
Field Set props API
Default
Description
actionsReactNodeNoprops—Optional actions rendered in the fieldset footer.
actionsClassNamestringNoprops—Additional class name for the actions area.
bodyClassNamestringNoprops—Additional class name for the grouped control body.
childrenReactNodeNoprops—Main content rendered inside the component.
classNamestringNostyling—Additional class name for the component root.
containerClassNamestringNoprops—Additional class name for the outer label/component container.
contentClassNamestringNoprops—Additional class name for the content area. Alias for bodyClassName.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
descriptionClassNamestringNoprops—Additional class name for the description text.
disabledbooleanNopropsfalseWhether the component is disabled.
errorClassNamestringNoprops—Additional class name for error text.
errorMessageReactNodeNoprops—Error message rendered after the grouped controls and announced to assistive technologies.