Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.6

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.

Usage

Terms and Conditions

Editable example

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

Alternatively, you can customize using Legend.

Terms and ConditionsPlease review the terms carefully before agreeing.

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.

Terms and ConditionsPlease review the terms carefully before agreeing.Please review the terms carefully before agreeing.

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.

Terms and ConditionsPlease review the terms carefully before agreeing.

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.

Terms and ConditionsAgreement is required.Agreement is required.

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.

Terms and ConditionsAgreement is required.

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.

Terms and ConditionsAgreement is required.Agreement is required.

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.

Terms and ConditionsPlease review the terms carefully before agreeing.Please review the terms carefully before agreeing.

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.

Terms and ConditionsPlease review the terms carefully before agreeing.Please review the terms carefully before agreeing.

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.

Terms and ConditionsPlease review the terms carefully before agreeing.Please review the terms carefully before agreeing.

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.

Terms and Conditionsrequired
Terms and Conditionsrequired

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.

Terms and Conditionsoptional
Terms and Conditionsoptional

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

PreviousFormControlNextButton