Fieldset
Renders a <fieldset> with an optional <legend> caption. Use it to group semantically related form controls. The native disabled attribute disables all nested inputs at once.
Basic
<Fieldset legend="Personal information">
<Stack gap="sm">
<TextInput label="Name" placeholder="Your name" />
<TextInput label="Email" placeholder="your@email.com" />
</Stack>
</Fieldset>Without legend
<Fieldset>
<Checkbox label="Option A" />
<Checkbox label="Option B" />
</Fieldset>Disabled
<Fieldset legend="Disabled group" disabled>
<TextInput label="Username" placeholder="disabled" />
<Checkbox label="I agree" />
</Fieldset>With custom radius
<Fieldset legend="Rounded" radius="xl">
<TextInput placeholder="Input inside rounded fieldset" />
</Fieldset>Props
| Prop | Type | Default | Description |
|---|---|---|---|
legend | ReactNode | — | Text or elements rendered inside a <legend> |
disabled | boolean | — | Disables all nested form controls |
radius | 'xs'|'sm'|'md'|'lg'|'xl'|string | — | Border-radius of the fieldset |
class | string | — | Additional CSS class names |
style | object | — | Inline styles |
children | ReactNode | — | Form controls or content inside the fieldset |