Components
Fieldset
Fieldset is used to group and label fields that naturally belong together, such as date fields or address fields. The component helps organize information, make forms more manageable, and improve accessibility for screen readers.
It is common to get confused between Fieldset and Field.
A good rule of thumb is that Fieldset is a set of Field
React
Unable to parse html
const PreviewEn = () => { return ( <Fieldset> <Fieldset.Legend>Which fjord arm do you live by?</Fieldset.Legend> <Fieldset.Description> The choice will help us improve the content we show you. </Fieldset.Description> <Radio label='Barsnesfjorden' name='radio' value='barsnesfjorden' /> <Radio label='Eidsfjorden' name='radio' value='eidsfjorden' /> <Radio label='None of these' name='radio' value='none-of-these' /> </Fieldset> ); }; render(<PreviewEn />)
- variant
- Description
Adjusts styling for paragraph length
- Type
"long" | "default" | "short"- Default
'default'
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "long" | "default" | "short" | 'default' | Adjusts styling for paragraph length |
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
Usage
Examples
With checkbox
Both Checkbox and Radio should be grouped in a Fieldset, even if there is only one element in the group.
React
Unable to parse html
const WithCheckboxEn = () => { return ( <Fieldset> <Fieldset.Legend>Do you accept the terms?</Fieldset.Legend> <Checkbox label='Yes, I accept' value='agree' /> </Fieldset> ); }; render(<WithCheckboxEn />)
More fields
React
Unable to parse html
const WithFieldsEn = () => { return ( <Fieldset> <Fieldset.Legend>Personal information</Fieldset.Legend> <Fieldset.Description> Fill in your personal information below. </Fieldset.Description> <Field> <Label>First name</Label> <Input /> </Field> <Field> <Label>Gender</Label> <Select> <Select.Option value='male'>Male</Select.Option> <Select.Option value='female'>Female</Select.Option> <Select.Option value='other'>Other</Select.Option> </Select> </Field> </Fieldset> ); }; render(<WithFieldsEn />)
Legend as heading
If it is a page that only has form on it, and the title of the page (<h1>) is the same as what will be in <legend>, you can put <h1> inside Fieldset.Legend.
React
Unable to parse html
const LegendAsHeadingEn = () => { return ( <Fieldset> <Fieldset.Legend> <h1>Where are you going to travel?</h1> </Fieldset.Legend> </Fieldset> ); }; render(<LegendAsHeadingEn />)
HTML
The class name ds-fieldset is added to the <fieldset> element.
CSS variables and data attributes
No relevant css variables found.
No relevant data attributes found.
Edit this page on github.com (opens in a new tab)