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 isInvalid to true and assign a ReactNode to errorMessage.

Editable example

<Fieldset
  isInvalid
  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 isInvalid 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 isInvalid is true. To replace the helper message with the error message when the error message is displayed, set isReplace to true.

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

Editable example

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

Copied!

Making it Required

To make it required, set isRequired to true.

Editable example

<Fieldset
  isRequired
  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 isDisabled to true.

Editable example

<Fieldset
  isDisabled
  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 isReadOnly to true.

Editable example

<Fieldset
  isReadOnly
  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
    isRequired
    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 isRequired>
    <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