Fieldset

Use Fieldset and legend to group related controls under a shared context.

Example

Shipping address

* indicates a required field.

API reference

FieldsetProps

legendstring

Name: legend

Description: Legend text describing grouped controls.

Type: string

Default:

legendHiddenbooleanfalse

Name: legendHidden

Description: Visually hides legend while retaining screen-reader access.

Type: boolean

Default: false

requiredbooleanfalse

Name: required

Description: Displays required field explanation text for the group.

Type: boolean

Default: false

childrenReactNode

Name: children

Description: Grouped form controls rendered inside fieldset.

Type: ReactNode

Default:

Accessibility

  • WCAG 1.3.1: Related controls are grouped semantically with legend context.
  • WCAG 3.3.2: Group-level required guidance communicates expectations.
  • WCAG 4.1.2: Native fieldset and legend semantics are preserved.

Playground

Open Fieldset stories