---
title: Fieldset
description: "`Fieldset`は、フィールドセット要素に、レジェンド、ヘルパーメッセージ、エラーメッセージなどをグループ化するために使用されるコンポーネントです。"
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>
```

## 使い方

```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>
```

### バリアントを変更する

```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>
```

### サイズを変更する

```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>
```

### ヘルプメッセージを表示する

ヘルプメッセージを表示する場合は、`helperMessage`に`ReactNode`を設定します。

```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>
```

または、`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>
```

### エラーメッセージを表示する

エラーメッセージを表示する場合は、`invalid`を`true`に設定し、`errorMessage`に`ReactNode`を設定します。

```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>
```

または、`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`を`true`に設定します。

```tsx
<Fieldset.Root
  required
  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>
```

### 無効にする

無効にする場合は、`disabled`を`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>
```

### 読み取り専用にする

読み取り専用にする場合は、`readOnly`を`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`を`true`に設定します。

```tsx
<Fieldset.Root
  legend="Email address"
  invalid
  helperMessage="We'll never share your email."
  errorMessage="Some fields are invalid. Please check them."
>
  <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>
```

### キャプションをカスタマイズする

キャプションをカスタマイズする場合は、`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>
```

### ヘッダーをカスタマイズする

ヘッダーをカスタマイズする場合は、`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>
```

### コンテンツをカスタマイズする

コンテンツをカスタマイズする場合は、`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.                |

## アクセシビリティ

現在、v2の移行に伴い、このセクションは更新中です。