Fieldset

Fieldset is a component used to group elements such as legends, helper messages, and error messages in a fieldset element.

Name

Email address

<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

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

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

import { Fieldset } from "@workspaces/ui"

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

Change Variant

Name

Email address

Name

Email address

Name

Email address

Name

Email address

<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

Name

Email address

Name

Email address

Name

Email address

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

Name

Email address

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

Name

Email address

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

Name

Email address

Some fields are invalid. Please check them.

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

Name

Email address

Some fields are invalid. Please check them.

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

Name

Email address

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

Name

Email address

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

Name

Email address

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

Name

Email address

Some fields are invalid. Please check them.

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

Name

Email address

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

Name

Email address

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

Name

Email address

Some fields are invalid. Please check them.

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