The `<Fieldset />` component is used as a wrapper around a set of form fields, typically checkboxes or radios. This helps screen readers to know that this is a group of form fields that are related to each other.

## Legend

Provide a short `legend` that describes the group of form fields that the set consists of.

```tsx live
const [checkedRadio, setCheckedRadio] = useState('blue');

return (
  <Fieldset legend="What is your favourite colour?" legendStyle="group">
    <RadioGroup value={checkedRadio} onInputChange={setCheckedRadio}>
      <Radio value="blue">Blue</Radio>
      <Radio value="red">Red</Radio>
      <Radio value="white">White</Radio>
    </RadioGroup>
  </Fieldset>
);
```

## Description

If you need to provide additional information to help the user fill in the set of fields, you can use the `description` prop. This text will also render inside the `<legend>` element so that it gets read out by screen readers, but is styled as a smaller paragraph to help visual digestion.

```tsx live
const [checkedRadio, setCheckedRadio] = useState('blue');

return (
  <Fieldset
    legend="What is your favourite colour?"
    description="You can change this later in Settings."
    legendStyle="group"
  >
    <RadioGroup value={checkedRadio} onInputChange={setCheckedRadio}>
      <Radio value="blue">Blue</Radio>
      <Radio value="red">Red</Radio>
      <Radio value="white">White</Radio>
    </RadioGroup>
  </Fieldset>
);
```

## Legend style

Use the `legendStyle` prop to control the font size of – and the spacing below – the legend. The fieldset supports three styles:

- `section` (default) - For larger form sections, containing a set of text fields e.g.
- `group` - For smaller groups, containing a set of checkboxes or radios e.g.
- `field` - For fieldset legends that should match the style of a Field label

NOTE: It is considered OK to nest a fieldset inside another fieldset (`group` inside a `section` e.g.), but is best avoided as some screen readers struggle to let the user know when they've exited the fieldset.

```tsx live
<Fieldset legend="Section (default)" description="This is a description.">
  <Field label="Label">
    <TextInput />
  </Field>

  <Field label="Label">
    <TextInput />
  </Field>

  <Field label="Label">
    <TextInput />
  </Field>
</Fieldset>
```

```tsx live
<Fieldset legend="Group" legendStyle="group" description="This is a description.">
  <CheckboxGroup
    value={['']}
    onInputChange={() => {
      return;
    }}
  >
    <Checkbox>Option</Checkbox>
    <Checkbox>Option</Checkbox>
    <Checkbox>Option</Checkbox>
  </CheckboxGroup>
</Fieldset>
```

```tsx live
<Fieldset legend="Field" legendStyle="field" description="This is a description.">
  <CheckboxGroup
    value={['']}
    onInputChange={() => {
      return;
    }}
    size="small"
  >
    <Checkbox>Option</Checkbox>
    <Checkbox>Option</Checkbox>
    <Checkbox>Option</Checkbox>
  </CheckboxGroup>
</Fieldset>
```

## Heading

Use the `heading` prop to control the legend's heading configuration. The heading has two properties:

- `as` - The HTML element to render the heading as (e.g. 'div', 'h1', etc.). This property is optional.
- `level` - The level of the heading (1-6). For example, `heading={{ level: 3 }}` renders as `<h3>`. This property is required if you pass a heading.

You can use these properties to customize the appearance and structure of the legend's heading.

```tsx live
<Fieldset legend="Section with heading level 4" description="This is a description." heading={{ level: 4 }}>
  <Field label="Label">
    <TextInput />
  </Field>
</Fieldset>
```

```tsx live
<Fieldset
  legend="Group with heading rendered as div"
  legendStyle="group"
  description="This is a description."
  heading={{ as: 'div', level: 4 }}
>
  <CheckboxGroup
    value={['']}
    onInputChange={() => {
      return;
    }}
  >
    <Checkbox>Option</Checkbox>
    <Checkbox>Option</Checkbox>
    <Checkbox>Option</Checkbox>
  </CheckboxGroup>
</Fieldset>
```

## Remove space for last field message

Set the `removeSpaceForLastFieldMessage` prop to `true` when you are stacking multiple fieldsets. This visually removes a `space.large` from the bottom of the fieldset, using negative margin. This is to create an even vertical rhythm when nesting Fields (or other components that have `keepSpaceForMessage` on by default) in your fieldsets. See the difference it makes below:

```tsx live
const [removeSpace, setRemoveSpace] = useState(false);

return (
  <Flex flexDirection="column" gap="medium">
    <PlaygroundCard>
      <Toggle
        label="Remove space for last field message"
        onClick={() => setRemoveSpace((prev) => !prev)}
        toggled={removeSpace}
      />
    </PlaygroundCard>

    <Flex flexDirection="column" gap="xxlarge">
      <Fieldset
        removeSpaceForLastFieldMessage={removeSpace}
        legend="Fieldset 1"
        legendStyle="section"
        description="This is a description."
      >
        <CheckboxGroup
          value={['']}
          onInputChange={() => {
            return;
          }}
        >
          <Checkbox>Option</Checkbox>
          <Checkbox>Option</Checkbox>
          <Checkbox>Option</Checkbox>
        </CheckboxGroup>
      </Fieldset>
      <Divider />
      <Fieldset legend="Fieldset 2" legendStyle="section" description="This is a description.">
        <CheckboxGroup
          value={['']}
          onInputChange={() => {
            return;
          }}
        >
          <Checkbox>Option</Checkbox>
          <Checkbox>Option</Checkbox>
          <Checkbox>Option</Checkbox>
        </CheckboxGroup>
      </Fieldset>
    </Flex>
  </Flex>
);
```

## Required

Use the `required` prop to indicate that the fieldset's inputs are required. This will display a red asterisk next to the legend and propagate the required state to child components via context.

```tsx live
<Fieldset required legend="Required fieldset" legendStyle="field" description="This fieldset is required.">
  <CheckboxGroup
    value={['']}
    onInputChange={() => {
      return;
    }}
  >
    <Checkbox>Option</Checkbox>
    <Checkbox>Option</Checkbox>
    <Checkbox>Option</Checkbox>
  </CheckboxGroup>
</Fieldset>
```

## Disabled

Use the `disabled` prop to control whether the descendant form controls are disabled. Components that support this context and will get the correct inherited styles are:

- [Field](/packages/field/)
- [Radio](/packages/radio/)
- [RadioGroup](/packages/radio/#radio-group)
- [Checkbox](/packages/checkbox/)
- [CheckboxGroup](/packages/checkbox/#checkbox-group)

```tsx live
<Fieldset disabled legend="Section (default)" description="This is a description.">
  <Field label="Label">
    <TextInput />
  </Field>

  <Field label="Label">
    <TextInput />
  </Field>

  <Field label="Label">
    <TextInput />
  </Field>
</Fieldset>
```

```tsx live
<Fieldset disabled legend="Group" legendStyle="group" description="This is a description.">
  <CheckboxGroup
    value={['']}
    onInputChange={() => {
      return;
    }}
  >
    <Checkbox>Option</Checkbox>
    <Checkbox>Option</Checkbox>
    <Checkbox>Option</Checkbox>
  </CheckboxGroup>
</Fieldset>
```

Form component to group thematically related form fields together.

Fieldset

Accessibility

Responsive layouts

Tokens

Foundations

a11y

Accordion

Actions

AddressInput

AppLayout

Avatar

Badge

Blanket

Breadcrumbs

BulkActionBar

Button

Card

Checkbox

Core

DateDropdown

DateInput

Divider

EmptyState

Field

FileInput

Filtering

Flex

Grid

Heading

Icon

Illustration

Link

List

Loading

Modal

Notice

PageHeader

Pagination

PhoneInput

Popover

Radio

RailTrack

RichTextEditor

ScrollWrap

SearchInput

SelectDropdown

SelectInput

ShowMore

Table

Tabs

Text

TextAreaInput

TextInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources