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

Field.Root

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.ErrorMessage

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.

Field.HelperMessage

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.

Field.Label

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"`	フォーカスの外側で更新される可能性があることを示します。

類似のコンポーネント

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

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

Bleedは、要素をコンテナの境界から外すために使用されるコンポーネントです。

Boxは、他のすべてのコンポーネントがその上に構築される最も抽象的なコンポーネントです。デフォルトでは、div要素をレンダリングします。

Centerは、コンポーネント内の子要素を中央に配置するコンポーネントです。

Containerは、汎用的な区分要素として使用するコンポーネントです。デフォルトでは、section要素をレンダリングします。

Flexは、Boxにflexを設定したコンポーネントです。また、便利なスタイルのショートハンドが用意されています。

Floatは、要素をコンテナの端に固定するために使用されるコンポーネントです。

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

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は、オンまたはオフの２つの状態を持つコンポーネントです。