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!

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

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

編集可能な例

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

Copied!

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

編集可能な例

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

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

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

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

編集可能な例

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

必須化する

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

編集可能な例

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

無効化する

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

編集可能な例

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

読み取り専用にする

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

編集可能な例

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

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

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

編集可能な例

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

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

オプショナルインジケーターを使う場合は、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