Fieldset

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

Source @yamada-ui/form-control

Import

import { Fieldset, Legend, HelperMessage, ErrorMessage } from "@yamada-ui/react"

Copied!

Fieldset: A wrapper component that controls child elements (Legend, HelperMessage, ErrorMessage).
Legend: A component representing the caption of the content.
HelperMessage: A component that displays a description of the content.
ErrorMessage: A component that is displayed when an error occurs.

Legend, HelperMessage, and ErrorMessage can be omitted.

Usage

Editable example

<Fieldset legend="Terms and Conditions">
  <Checkbox>I agree to the Terms and Conditions.</Checkbox>
</Fieldset>

Copied!

Alternatively, you can customize using Legend.

Editable example

<Fieldset helperMessage="Please review the terms carefully before agreeing.">
  <Legend color="primary">Terms and Conditions</Legend>
  <Checkbox>I agree to the Terms and Conditions.</Checkbox>
</Fieldset>

Copied!

Displaying a Helper Message

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

Editable example

<Fieldset
  legend="Terms and Conditions"
  helperMessage="Please review the terms carefully before agreeing."
>
  <Checkbox>I agree to the Terms and Conditions.</Checkbox>
</Fieldset>

Copied!

Alternatively, you can customize using HelperMessage.

Editable example

<Fieldset legend="Terms and Conditions">
  <Checkbox>I agree to the Terms and Conditions.</Checkbox>
  <HelperMessage color="gray.300">
    Please review the terms carefully before agreeing.
  </HelperMessage>
</Fieldset>

Copied!

Displaying an Error Message

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

Editable example

<Fieldset
  invalid
  legend="Terms and Conditions"
  errorMessage="Agreement is required."
>
  <Checkbox>I agree to the Terms and Conditions.</Checkbox>
</Fieldset>

Copied!

Alternatively, you can customize using ErrorMessage.

Editable example

<Fieldset invalid legend="Terms and Conditions">
  <Checkbox>I agree to the Terms and Conditions.</Checkbox>
  <ErrorMessage color="gray.300">Agreement is required.</ErrorMessage>
</Fieldset>

Copied!

Replacing Helper and Error Messages

Error messages are displayed only when invalid is true. To replace the helper message with the error message when the error message is displayed, set replace to true.

Use the replace property to replace the helper message with the error message.

Editable example

<Fieldset
  invalid
  legend="Terms and Conditions"
  helperMessage="Please review the terms carefully before agreeing."
  errorMessage="Agreement is required."
  replace={true}
>
  <Checkbox>I agree to the Terms and Conditions.</Checkbox>
</Fieldset>

Copied!

Making it Required

To make it required, set required to true.

Editable example

<Fieldset
  required
  legend="Terms and Conditions"
  helperMessage="Please review the terms carefully before agreeing."
  errorMessage="Agreement is required."
>
  <Checkbox>I agree to the Terms and Conditions.</Checkbox>
</Fieldset>

Copied!

Disabling

To disable, set disabled to true.

Editable example

<Fieldset
  disabled
  legend="Terms and Conditions"
  helperMessage="Please review the terms carefully before agreeing."
  errorMessage="Agreement is required."
>
  <Checkbox>I agree to the Terms and Conditions.</Checkbox>
</Fieldset>

Copied!

Making it Read-Only

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

Editable example

<Fieldset
  readOnly
  legend="Terms and Conditions"
  helperMessage="Please review the terms carefully before agreeing."
  errorMessage="Agreement is required."
>
  <Checkbox>I agree to the Terms and Conditions.</Checkbox>
</Fieldset>

Copied!

Customizing the Required Indicator

To customize the required indicator, set a ReactNode to requiredIndicator.

Editable example

<VStack>
  <Fieldset
    required
    legend="Terms and Conditions"
    requiredIndicator={
      <Tag size="sm" colorScheme="red" ms={2}>
        required
      </Tag>
    }
  >
    <Checkbox>I agree to the Terms and Conditions.</Checkbox>
  </Fieldset>

  <Fieldset required>
    <Legend
      requiredIndicator={
        <Tag size="sm" colorScheme="red" ms={2}>
          required
        </Tag>
      }
    >
      Terms and Conditions
    </Legend>
    <Checkbox>I agree to the Terms and Conditions.</Checkbox>
  </Fieldset>
</VStack>

Copied!

Using an Optional Indicator

To use an optional indicator, set a ReactNode to optionalIndicator.

Editable example

<VStack>
  <Fieldset
    legend="Terms and Conditions"
    optionalIndicator={
      <Tag size="sm" colorScheme="primary" ms={2}>
        optional
      </Tag>
    }
  >
    <Checkbox>I agree to the Terms and Conditions.</Checkbox>
  </Fieldset>

  <Fieldset>
    <Legend
      optionalIndicator={
        <Tag size="sm" colorScheme="primary" ms={2}>
          optional
        </Tag>
      }
    >
      Terms and Conditions
    </Legend>
    <Checkbox>I agree to the Terms and Conditions.</Checkbox>
  </Fieldset>
</VStack>

Copied!

Edit this page on GitHub

PreviousFormControl NextButton