Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.5.1

FormControl

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

ソース@yamada-ui/form-control

インポート

import {
  FormControl,
  Label,
  HelperMessage,
  ErrorMessage,
} from "@yamada-ui/react"
Copied!
  • FormControl: 子要素(Label, HelperMessage, ErrorMessage)を制御するラッパーコンポーネントです。
  • Label: フォームのセクションに使用されるラベルのコンポーネントです。htmlForは、子要素に自動的に割り当てられます。
  • HelperMessage: フォームのセクションの説明を表示するコンポーネントです。
  • ErrorMessage: エラー発生時に表示されるコンポーネントです。

使い方

編集可能な例

<FormControl label="Email address">
  <Input type="email" placeholder="your email address" />
</FormControl>
Copied!

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

編集可能な例

<FormControl helperMessage="We'll never share your email.">
  <Label color="primary">Email address</Label>
  <Input type="email" placeholder="your email address" />
</FormControl>
Copied!

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

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

編集可能な例

<FormControl
  label="Email address"
  helperMessage="We'll never share your email."
>
  <Input type="email" placeholder="your email address" />
</FormControl>
Copied!

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

編集可能な例

<FormControl label="Email address">
  <Input type="email" placeholder="your email address" />
  <HelperMessage color="gray.300">We'll never share your email.</HelperMessage>
</FormControl>
Copied!

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

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

編集可能な例

<FormControl isInvalid label="Email address" errorMessage="Email is required.">
  <Input type="email" placeholder="your email address" />
</FormControl>
Copied!

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

編集可能な例

<FormControl isInvalid label="Email address">
  <Input type="email" placeholder="your email address" />
  <ErrorMessage color="gray.300">Email is required.</ErrorMessage>
</FormControl>
Copied!

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

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

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

編集可能な例

<FormControl
  isInvalid
  label="Email address"
  helperMessage="We'll never share your email."
  errorMessage="Email is required."
  isReplace={true}
>
  <Input type="email" placeholder="your email address" />
</FormControl>
Copied!

必須化する

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

編集可能な例

<FormControl
  isRequired
  label="Email address"
  helperMessage="We'll never share your email."
  errorMessage="Email is required."
>
  <Input type="email" placeholder="your email address" />
</FormControl>
Copied!

無効化する

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

編集可能な例

<FormControl
  isDisabled
  label="Email address"
  helperMessage="We'll never share your email."
  errorMessage="Email is required."
>
  <Input type="email" placeholder="your email address" />
</FormControl>
Copied!

読み取り専用にする

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

編集可能な例

<FormControl
  isReadOnly
  label="Email address"
  helperMessage="We'll never share your email."
  errorMessage="Email is required."
>
  <Input type="email" placeholder="your email address" />
</FormControl>
Copied!

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

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

編集可能な例

<VStack>
  <FormControl
    isRequired
    label="Email address"
    requiredIndicator={
      <Tag size="sm" colorScheme="red" ms={2}>
        required
      </Tag>
    }
  >
    <Input type="email" placeholder="your email address" />
  </FormControl>

  <FormControl isRequired>
    <Label
      requiredIndicator={
        <Tag size="sm" colorScheme="red" ms={2}>
          required
        </Tag>
      }
    >
      Email address
    </Label>
    <Input type="email" placeholder="your email address" />
  </FormControl>
</VStack>
Copied!

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

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

編集可能な例

<VStack>
  <FormControl
    label="Email address"
    optionalIndicator={
      <Tag size="sm" colorScheme="primary" ms={2}>
        optional
      </Tag>
    }
  >
    <Input type="email" placeholder="your email address" />
  </FormControl>

  <FormControl>
    <Label
      optionalIndicator={
        <Tag size="sm" colorScheme="primary" ms={2}>
          optional
        </Tag>
      }
    >
      Email address
    </Label>
    <Input type="email" placeholder="your email address" />
  </FormControl>
</VStack>
Copied!

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

前フォーム次Fieldset