Fieldset

Fieldsetは、フィールドセット要素に、レジェンド、ヘルパーメッセージ、エラーメッセージなどをグループ化するために使用されるコンポーネントです。

インポート

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

Copied!

Fieldset: 子要素(Legend, HelperMessage, ErrorMessage)を制御するラッパーコンポーネントです。
Legend: コンテンツのキャプションを表すコンポーネントです。
HelperMessage: コンテンツの説明を表示するコンポーネントです。
ErrorMessage: エラー発生時に表示されるコンポーネントです。

Legend, HelperMessageとErrorMessageは、省略することができます。

使い方

編集可能な例

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

Copied!

または、Legendを使用してカスタマイズすることも可能です。

編集可能な例

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

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

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

編集可能な例

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

Copied!

または、HelperMessageを使用してカスタマイズすることも可能です。

編集可能な例

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

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

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

編集可能な例

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

Copied!

または、ErrorMessageを使用してカスタマイズすることも可能です。

編集可能な例

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

ヘルプメッセージとエラーメッセージの置き換える

エラーメッセージは、isInvalidがtrueの場合のみ表示されます。エラーメッセージが表示されたときに、ヘルプメッセージとエラーメッセージの置き換える場合は、isReplaceをtrueに設定します。

isReplaceプロパティを使用して、ヘルプメッセージとエラーメッセージを置き換えます。

編集可能な例

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

必須化する

必須化する場合は、isRequiredをtrueに設定します。

編集可能な例

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

無効化する

無効化する場合は、isDisabledをtrueに設定します。

編集可能な例

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

読み取り専用にする

読み取り専用にする場合は、isReadOnlyをtrueに設定します。

編集可能な例

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

必須インジケーターをカスタマイズする

必須インジケーターをカスタマイズする場合は、requiredIndicatorにReactNodeを設定します。

編集可能な例

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

オプショナルインジケーターを使う

オプショナルインジケーターを使う場合は、optionalIndicatorにReactNodeを設定します。

編集可能な例

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

GitHubでこのページを編集する

前FormControl 次Button