Skip to content

Documentation

Fieldset

Fieldset groups related controls under one semantic boundary.

Storybook Source

Root Props

Prop	Type	Default
`appearance`	`FieldsetAppearance`	`'transparent'`
Visual appearance of the fieldset container.

Also accepts all <fieldset> attributes.

Child Parts

FieldsetLegend: semantic legend for the group.
FieldsetHeader: optional descriptive block below the legend.

`FieldsetLegend`

Prop	Type	Default
`size`	`TextSize`	—
Visual size of the text, typically mapped to the design system’s type scale.
`asChild`	`boolean`	—
If true, renders the text as a child component using `Slot`. Useful for compatibility with native elements or other components.
`fontWeight`	`400 \| 500 \| 600 \| 700 \| 900`	—
Font weight applied to the text. Common values: 400: Regular; 500: Medium; 600: Semi-bold; 700: Bold; 900: Extra bold
`ref`	`Ref<HTMLSpanElement>`	—
Ref to the underlying `<span>` or slotted element. Useful for measuring, focusing, or DOM manipulation.

Also accepts all <span> attributes.

`FieldsetHeader`

Also accepts all HTML attributes.

Types

FieldsetAppearance = 'transparent' | 'outlined' | string
FieldsetProps
FieldsetLegendProps
FieldsetHeaderProps

State Model

Fieldset itself does not manage controlled state.
Native disabled on the root disables descendant form controls by browser semantics.
Validation, selection, and value state belong to the controls rendered inside the group.