'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Forms
Fieldset
Groups related fields under a legend, with an optional description, and can disable them all.
Ant Design: Form groups
import { Fieldset } from '@alea/ui';
Examples
Grouped fields
The legend is read when people enter the group.
Props
Fieldset props
Groups related fields under a legend: an address, a payment method (Mantine Fieldset, HTML fieldset).
| Prop | Type | Default | Description |
|---|---|---|---|
legendrequired | ReactNode | - | The group's name, read before each field in it. |
className | string | - | Extra class names for the root element. |
description | ReactNode | - | One sentence under the legend, linked to the group. |
isDisabled | boolean | - | Disables every field inside. |
variant | "filled" | "plain" | 'filled' | filled (a panel, default) or plain. |
Accessibility
- A real fieldset and legend: screen readers announce the legend when entering the group.
Keyboard
| Key | Does |
|---|---|
| Tab | Moves into the fields; the legend is announced |
Do and don't
Do
- Group fields that answer one question (an address, a card).
- Use the description for rules that apply to every field inside.
Don't
- Don't nest fieldsets more than once.
- Don't use a fieldset around a single field.