Fieldset

The Fieldset component is used to group related form fields and includes a descriptive legend to label the group, helping users understand the relationship between these form fields.

View in Storybook View in Github

import { ... } from '@ag.ds-next/react/fieldset';

use the legend to describe the purpose of the related form fields
use when you have several questions relating to the same topic
provide useful hints where necessary
align form inputs using a Form stack

Don’t

use when you have a single form field that asks for a single piece of information
use to group Checkboxes and Radios - use Control group instead

Open in Playroom, opens in a new tab

<Fieldset
	legend="What is your address?"
	hint="We will only use this to respond to your request"
>
	<FormStack>
		<TextInput
			label="Street and number"
			required
			autoComplete="street-address"
			maxWidth="xl"
		/>
		<TextInput
			label="Suburb"
			required
			autoComplete="address-level2"
			maxWidth="xl"
		/>
		<TextInput label="Country" required autoComplete="country" maxWidth="xl" />
		<TextInput
			label="Postcode"
			required
			autoComplete="postal-code"
			maxWidth="sm"
		/>
	</FormStack>
</Fieldset>

Legend as page heading

If you are asking just one question per page, you can set the contents of the legend as the page heading, as shown in the example below. This is good practice as it means that users of screen readers will only hear the contents once.

Open in Playroom, opens in a new tab

<Fieldset
	legend={<H1>What is your date of birth?</H1>}
	hint={
		<Text as="p" fontSize="md" color="muted">
			We will only use this to respond to your requests
		</Text>
	}
>
	<FormStack>
		<TextInput
			label="Day"
			inputMode="numeric"
			maxWidth="md"
			required
			autoComplete="bday-day"
		/>
		<TextInput
			label="Month"
			inputMode="numeric"
			maxWidth="md"
			required
			autoComplete="bday-month"
		/>
		<TextInput
			label="Year"
			inputMode="numeric"
			maxWidth="md"
			required
			autoComplete="bday-year"
		/>
	</FormStack>
</Fieldset>

Control group – Control groups allow related checkboxes and radios to be grouped together.
Field – The field package exposes the elements around form inputs, and an API to compose them.

Edit this page

Fieldset

Legend as page heading

Related components