---
title: Fieldset
description: "`Fieldset` is a component used to group elements such as legends, helper messages, and error messages in a fieldset element."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/fieldset/fieldset.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/fieldset
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-fieldset--basic
---

```tsx
<Fieldset.Root legend="Contact details">
  <Field.Root label="Name">
    <Input type="text" placeholder="Your name" />
  </Field.Root>

  <Field.Root label="Email address">
    <Input type="email" placeholder="Your email address" />
  </Field.Root>
</Fieldset.Root>
```

## Usage

```tsx
import { Fieldset } from "@yamada-ui/react"
```

```tsx
import { Fieldset } from "@/components/ui"
```

```tsx
import { Fieldset } from "@workspaces/ui"
```

```tsx
<Fieldset.Root>
  <Fieldset.Legend />
  <Fieldset.Header>
    <Fieldset.Legend />
    <Fieldset.HelperMessage />
  </Fieldset.Header>
  <Fieldset.Content />
  <Fieldset.HelperMessage />
  <Fieldset.ErrorMessage />
</Fieldset.Root>
```

### Change Variant

```tsx
<VStack>
  <For each={["plain", "elevated", "outline", "panel"]}>
    {(variant, index) => (
      <Fieldset.Root
        key={index}
        variant={variant}
        helperMessage="Please provide your contact details below."
        legend="Contact details"
      >
        <Field.Root label="Name">
          <Input
            type="text"
            placeholder="Your name"
            bg={["elevated", "panel"].includes(variant) ? "bg" : undefined}
          />
        </Field.Root>

        <Field.Root label="Email address">
          <Input
            type="email"
            placeholder="Your email address"
            bg={["elevated", "panel"].includes(variant) ? "bg" : undefined}
          />
        </Field.Root>
      </Fieldset.Root>
    )}
  </For>
</VStack>
```

### Change Size

```tsx
<VStack>
  <For each={["sm", "md", "lg"]}>
    {(size, index) => (
      <Fieldset.Root
        key={index}
        size={size}
        variant="panel"
        helperMessage="Please provide your contact details below."
        legend="Contact details"
      >
        <Field.Root label="Name">
          <Input type="text" placeholder="Your name" bg="bg" />
        </Field.Root>

        <Field.Root label="Email address">
          <Input type="email" placeholder="Your email address" bg="bg" />
        </Field.Root>
      </Fieldset.Root>
    )}
  </For>
</VStack>
```

### Displaying a Helper Message

To display a helper message, set a `ReactNode` to `helperMessage`.

```tsx
<Fieldset.Root
  helperMessage="Please provide your contact details below."
  legend="Contact details"
>
  <Field.Root label="Name">
    <Input type="text" placeholder="Your name" />
  </Field.Root>

  <Field.Root label="Email address">
    <Input type="email" placeholder="Your email address" />
  </Field.Root>
</Fieldset.Root>
```

Alternatively, you can customize using `Fieldset.HelperMessage`.

```tsx
<Fieldset.Root legend="Contact details">
  <Fieldset.HelperMessage color="warning">
    Please provide your contact details below.
  </Fieldset.HelperMessage>

  <Field.Root label="Name">
    <Input type="text" placeholder="Your name" />
  </Field.Root>

  <Field.Root label="Email address">
    <Input type="email" placeholder="Your email address" />
  </Field.Root>
</Fieldset.Root>
```

### Displaying an Error Message

To display an error message, set `invalid` to `true` and assign a `ReactNode` to `errorMessage`.

```tsx
<Fieldset.Root
  errorMessage="Some fields are invalid. Please check them."
  helperMessage="Please provide your contact details below."
  invalid
  legend="Contact details"
>
  <Field.Root label="Name">
    <Input type="text" placeholder="Your name" />
  </Field.Root>

  <Field.Root label="Email address">
    <Input type="email" placeholder="Your email address" />
  </Field.Root>
</Fieldset.Root>
```

Alternatively, you can customize using `Fieldset.ErrorMessage`.

```tsx
<Fieldset.Root
  helperMessage="Please provide your contact details below."
  invalid
  legend="Contact details"
>
  <Field.Root label="Name">
    <Input type="text" placeholder="Your name" />
  </Field.Root>

  <Field.Root label="Email address">
    <Input type="email" placeholder="Your email address" />
  </Field.Root>

  <Fieldset.ErrorMessage color="success">
    Some fields are invalid. Please check them.
  </Fieldset.ErrorMessage>
</Fieldset.Root>
```

### Required

To make it required, set `required` to `true`.

```tsx
<Fieldset.Root
  disabled
  helperMessage="Please provide your contact details below."
  legend="Contact details"
>
  <Field.Root label="Name">
    <Input type="text" placeholder="Your name" />
  </Field.Root>

  <Field.Root label="Email address">
    <Input type="email" placeholder="Your email address" />
  </Field.Root>
</Fieldset.Root>
```

### Disable

To disable, set `disabled` to `true`.

```tsx
<Fieldset.Root
  disabled
  helperMessage="Please provide your contact details below."
  legend="Contact details"
>
  <Field.Root label="Name">
    <Input type="text" placeholder="Your name" />
  </Field.Root>

  <Field.Root label="Email address">
    <Input type="email" placeholder="Your email address" />
  </Field.Root>
</Fieldset.Root>
```

### Read-Only

To make it read-only, set `readOnly` to `true`.

```tsx
<Fieldset.Root
  helperMessage="We'll never share your email."
  legend="Email address"
  readOnly
>
  <Field.Root label="Name">
    <Input type="text" placeholder="Your name" />
  </Field.Root>

  <Field.Root label="Email address">
    <Input type="email" placeholder="Your email address" />
  </Field.Root>
</Fieldset.Root>
```

### Invalid

To make the input invalid, set `invalid` to `true`.

```tsx
<Fieldset.Root
  legend="Email address"
  helperMessage="We'll never share your email."
  errorMessage="Some fields are invalid. Please check them."
  invalid
>
  <Field.Root label="Name">
    <Input type="text" placeholder="Your name" />
  </Field.Root>

  <Field.Root label="Email address">
    <Input type="email" placeholder="Your email address" />
  </Field.Root>
</Fieldset.Root>
```

### Customize the Legend

To customize the legend, use `Fieldset.Legend`.

```tsx
<Fieldset.Root helperMessage="Please provide your contact details below.">
  <Fieldset.Legend color="success">Contact details</Fieldset.Legend>

  <Field.Root label="Name">
    <Input type="text" placeholder="Your name" />
  </Field.Root>

  <Field.Root label="Email address">
    <Input type="email" placeholder="Your email address" />
  </Field.Root>
</Fieldset.Root>
```

### Customize the Header

To customize the header, use `Fieldset.Header`.

```tsx
<Fieldset.Root>
  <Fieldset.Header borderBottomWidth="1px" pb="md">
    <Fieldset.Legend>Contact details</Fieldset.Legend>
    <Fieldset.HelperMessage>
      Please provide your contact details below.
    </Fieldset.HelperMessage>
  </Fieldset.Header>

  <Field.Root label="Name">
    <Input type="text" placeholder="Your name" />
  </Field.Root>

  <Field.Root label="Email address">
    <Input type="email" placeholder="Your email address" />
  </Field.Root>
</Fieldset.Root>
```

### Customize the Content

To customize the content, use `Fieldset.Content`.

```tsx
<Fieldset.Root
  errorMessage="Some fields are invalid. Please check them."
  helperMessage="Please provide your contact details below."
  invalid
  legend="Contact details"
>
  <Fieldset.Content borderWidth="1px" p="md" rounded="l2">
    <Field.Root label="Name">
      <Input type="text" placeholder="Your name" />
    </Field.Root>

    <Field.Root label="Email address">
      <Input type="email" placeholder="Your email address" />
    </Field.Root>
  </Fieldset.Content>
</Fieldset.Root>
```

## Props

### Fieldset.Root

| Prop                 | Default   | Type                                                                                                                      | Description                                |
| -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`                 | -         | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`            | -         | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`                | -         | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme`        | -         | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `size`               | `"md"`    | `"lg" \| "md" \| "sm"`                                                                                                    | The size of the component.                 |
| `variant`            | `"plain"` | `"elevated" \| "outline" \| "panel" \| "plain"`                                                                           | The variant of the component.              |
| `contentProps`       | -         | `FieldsetContentProps`                                                                                                    | Props the content component.               |
| `errorMessage`       | -         | `ReactNode`                                                                                                               | The fieldset error message to use.         |
| `errorMessageProps`  | -         | `FieldsetErrorMessageProps`                                                                                               | Props the error message component.         |
| `headerProps`        | -         | `FieldsetHeaderProps`                                                                                                     | Props the header component.                |
| `helperMessage`      | -         | `ReactNode`                                                                                                               | The fieldset helper message to use.        |
| `helperMessageProps` | -         | `FieldsetHelperMessageProps`                                                                                              | Props the helper message component.        |
| `invalid`            | `false`   | `boolean`                                                                                                                 | If `true`, the field will be invalid.      |
| `legend`             | -         | `ReactNode`                                                                                                               | The fieldset legend to use.                |
| `legendProps`        | -         | `FieldsetLegendProps`                                                                                                     | Props the legend component.                |
| `readOnly`           | `false`   | `boolean`                                                                                                                 | If `true`, the field will be readonly.     |
| `required`           | `false`   | `boolean`                                                                                                                 | If `true`, the field will be required.     |

### Fieldset.Content

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Fieldset.ErrorMessage

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Fieldset.Header

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Fieldset.HelperMessage

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Fieldset.Legend

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

## Accessibility

Currently, this section is being updated due to the migration of v2.