Field

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

Email address

<Field.Root label="Email address">
  <Input type="email" placeholder="your email address" />
</Field.Root>

使い方

import { Field } from "@yamada-ui/react"

import { Field } from "@/components/ui"

import { Field } from "@workspaces/ui"

<Field.Root>
  <Field.Label />
  <Field.HelperMessage />
  <Field.ErrorMessage />
</Field.Root>

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

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

Email addressWe'll never share your email.

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

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

Email addressWe'll never share your email.

<Field.Root label="Email address">
  <Input type="email" placeholder="your email address" />
  <Field.HelperMessage color="warning">
    We'll never share your email.
  </Field.HelperMessage>
</Field.Root>

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

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

Email addressEmail is required.

<Field.Root errorMessage="Email is required." invalid label="Email address">
  <Input type="email" placeholder="your email address" />
</Field.Root>

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

Email addressEmail is required.

<Field.Root invalid label="Email address">
  <Input type="email" placeholder="your email address" />
  <Field.ErrorMessage color="success">Email is required.</Field.ErrorMessage>
</Field.Root>

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

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

Email addressEmail is required.

Email addressWe'll never share your email.Email is required.

<VStack>
  <Field.Root
    errorMessage="Email is required."
    helperMessage="We'll never share your email."
    invalid
    label="Email address"
    replace
  >
    <Input type="email" placeholder="your email address" />
  </Field.Root>

  <Field.Root
    errorMessage="Email is required."
    helperMessage="We'll never share your email."
    invalid
    label="Email address"
    replace={false}
  >
    <Input type="email" placeholder="your email address" />
  </Field.Root>
</VStack>

必須にする

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

Email addressWe'll never share your email.

<Field.Root
  helperMessage="We'll never share your email."
  label="Email address"
  required
>
  <Input type="email" placeholder="your email address" />
</Field.Root>

無効にする

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

Email addressWe'll never share your email.

<Field.Root
  disabled
  helperMessage="We'll never share your email."
  label="Email address"
>
  <Input type="email" placeholder="your email address" />
</Field.Root>

読み取り専用にする

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

Email addressWe'll never share your email.

<Field.Root
  helperMessage="We'll never share your email."
  label="Email address"
  readOnly
>
  <Input type="email" placeholder="your email address" />
</Field.Root>

方向を変更する

方向を変更する場合は、orientationに"horizontal"または"vertical"を設定します。デフォルトでは、"vertical"が設定されています。

Email addressWe'll never share your email.

<VStack>
  <For each={["vertical", "horizontal"]}>
    {(orientation, index) => (
      <Field.Root
        key={index}
        helperMessage="We'll never share your email."
        label="Email address"
        orientation={orientation}
      >
        <Input type="email" placeholder="your email address" />
      </Field.Root>
    )}
  </For>
</VStack>

ラベルをカスタマイズする

ラベルをカスタマイズする場合は、Field.Labelを使用します。

Email address

<Field.Root>
  <Field.Label color="success">Email address</Field.Label>
  <Input type="email" placeholder="your email address" />
</Field.Root>

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

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

Email addressrequired

<VStack>
  <Field.Root
    label="Email address"
    required
    requiredIndicator={
      <Tag colorScheme="red" size="sm">
        required
      </Tag>
    }
  >
    <Input type="email" placeholder="your email address" />
  </Field.Root>

  <Field.Root required>
    <Field.Label
      requiredIndicator={
        <Tag colorScheme="red" size="sm">
          required
        </Tag>
      }
    >
      Email address
    </Field.Label>
    <Input type="email" placeholder="your email address" />
  </Field.Root>
</VStack>

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

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

Email addressoptional

<VStack>
  <Field.Root
    label="Email address"
    optionalIndicator={<Tag size="sm">optional</Tag>}
  >
    <Input type="email" placeholder="your email address" />
  </Field.Root>

  <Field.Root>
    <Field.Label optionalIndicator={<Tag size="sm">optional</Tag>}>
      Email address
    </Field.Label>
    <Input type="email" placeholder="your email address" />
  </Field.Root>
</VStack>

Props

FieldRoot

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`disabled`	`false`	`boolean` If `true`, the field will be disabled.
`errorMessage`	-	`ReactNode` The field error message to use.
`errorMessageProps`	-	`FieldErrorMessageProps` Props the error message component.
`helperMessage`	-	`ReactNode` The field helper message to use.
`helperMessageProps`	-	`FieldHelperMessageProps` Props the helper message component.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`label`	-	`ReactNode` The field label to use.
`labelProps`	-	`FieldLabelProps` Props the label component.
`name`	-	`string` The name of the field.
`optionalIndicator`	-	`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>` The optional indicator to use.
`readOnly`	`false`	`boolean` If `true`, the field will be readonly.
`replace`	`true`	`boolean` If `true`, switch between helper message and error message using invalid.
`required`	`false`	`boolean` If `true`, the field will be required.
`requiredIndicator`	-	`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>` The required indicator to use.

Field

Prop	デフォルト	型 / 説明
`disabled`	`false`	`boolean` If `true`, the field will be disabled.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`readOnly`	`false`	`boolean` If `true`, the field will be readonly.
`required`	`false`	`boolean` If `true`, the field will be required.
`Label`	-
`Root`	-

FieldErrorMessage

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

FieldHelperMessage

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

FieldLabel

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`optionalIndicator`	-	`ReactNode` The optional indicator to use.
`required`	`false`	`boolean` If `true`, the field will be required.
`requiredIndicator`	-	`ReactNode` The required indicator to use.

アクセシビリティ

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`FieldRequiredIndicator`	`role="presentation"`	プレゼンテーションであることを示します。
	`aria-hidden`	要素をアクセシビリティツリーから除外します。
`Field.ErrorMessage`	`aria-live="polite"`	フォーカスの外側で更新される可能性があることを示します。

類似のコンポーネント

Formは、複数のフォーム要素をグループ化するためのコンポーネントです。

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

ZStackは、子要素を奥行き方向にスタックするために使用されます。

VStackは、子要素を垂直方向にスタックするために使用されます。

Wrapは、Flexにwrapを設定したコンポーネントです。Flexから便利なスタイルのショートハンドを継承しています。

Stackは、要素をグループ化し、子要素間にスペースを設けるコンポーネントです。

Spacerは、要素間に空間を追加するために使用するコンポーネントです。

SimpleGridは、Gridをより使いやすくシンプルにしたコンポーネントです。

使用しているコンポーネント・フック

Formは、複数のフォーム要素をグループ化するためのコンポーネントです。

使用されているコンポーネント・フック

Autocompleteは、ユーザーのテキスト入力に応じて候補を表示するために使用されるコンポーネントです。

Calendarは、日付を表示または選択するカレンダーのコンポーネントです。

Checkboxは、ユーザーが複数の選択肢の中から複数の値を選択するために使用されるコンポーネントです。

ColorPickerは、ユーザーが色を選択したり任意の色の値を入力するために使用されるコンポーネントです。

DatePickerは、ユーザーが日付を選択するために使用されるコンポーネントです。

Dropzoneは、ファイルをドラッグアンドドロップでアップロードするために使用されるコンポーネントです。

Editableは、インラインで編集可能なテキスト入力を取得するために使用されるコンポーネントです。

FileButtonは、ユーザーがファイルを選択するために使用されるボタンのコンポーネントです。

FileInputは、ユーザーがファイルを選択するために使用されるコンポーネントです。

Inputは、ユーザーからのテキスト入力を取得するために使用されるコンポーネントです。

NativeSelectは、ユーザーがオプションのリストから1つの値を選択するために使用されるコンポーネントです。ブラウザ（ユーザーエージェント）によって提供されるネイティブなドロップダウンリストを表示します。

NumberInputは、ユーザーからの数値入力を取得するために使用されるコンポーネントです。

PasswordInputは、表示・非表示の切り替えができるパスワード入力用のコンポーネントです。

PinInputは、ピンコードやOTP(ワンタイムパスワード)の入力を取得するために使用されるコンポーネントです。

Radioは、ユーザーが複数の選択肢の中から1つの値を選択するために使用されるコンポーネントです。

Ratingは、ユーザーが評価を行うために使用させるコンポーネントです。

SaturationSliderは、ユーザーが色の彩度を選択するために使用されるコンポーネントです。

SegmentedControlは、ユーザーが複数の選択肢の中から1つを選択するために使用されるコンポーネントです。

Selectは、ユーザーがオプションのリストから値を選択するために使用されるコンポーネントです。

Sliderは、ユーザーが値の範囲から選択するために使用されるコンポーネントです。

Switchは、オンとオフの状態を切り替えるために使用されるコンポーネントです。

Textareaは、複数行のテキスト入力を取得するために使用されるコンポーネントです。

Toggleは、オンまたはオフの２つの状態を持つコンポーネントです。