FormField

フォームフィールドのラッパーコンポーネント。ラベル・説明・エラーメッセージを統一的に管理する。

いつ使うか

フォーム入力コンポーネントにラベルやエラーメッセージを付与する場合に使用する
複数のフォームフィールドを統一的なレイアウトで並べる場合に使用する

いつ使わないか

Checkbox / Switch など、コンポーネント自体がラベルを持つ場合はラベルなしで使用する（エラー表示のみ）
単独の入力フィールドでラベルが不要な場合（検索ボックスなど）

Usage

import { FormField } from '@bi-shop-it/ui/form-field';
import { TextInput } from '@bi-shop-it/ui/text-input';

<FormField htmlFor="name" label="名前">
  <TextInput id="name" placeholder="山田太郎" />
</FormField>;

Props

Prop	型	デフォルト	説明
`children`	`ReactNode`	—	フォーム入力コンポーネント
`htmlFor`	`string`	—	対応する入力要素のid
`label`	`string`	—	フィールドのラベル
`description`	`string`	—	フィールドの補足説明
`error`	`string`	—	エラーメッセージ。指定するとエラー表示される
`required`	`boolean`	`false`	必須マーク「*」をラベルに付与する

状態

デフォルト

名前

<FormField htmlFor="name" label="名前">
  <TextInput id="name" placeholder="山田太郎" />
</FormField>

エラー表示

error にメッセージを渡すと、エラーメッセージが role="alert" で表示される。入力コンポーネントの error prop も合わせて指定すること。

名前

名前は必須です

<FormField error="名前は必須です" htmlFor="name" label="名前">
  <TextInput error id="name" placeholder="山田太郎" />
</FormField>

Required

required を指定するとラベルに「*」が付与される。

メールアドレス

<FormField htmlFor="email" label="メールアドレス" required>
  <TextInput id="email" placeholder="[email protected]" type="email" />
</FormField>

完全なフォーム例

複数の FormField を組み合わせたフォームの例。

名前

メールアドレス

連絡先として使用します

部署

<div className="space-y-6">
  <FormField htmlFor="name" label="名前" required>
    <TextInput id="name" placeholder="山田太郎" />
  </FormField>
  <FormField
    description="連絡先として使用します"
    htmlFor="email"
    label="メールアドレス"
    required
  >
    <TextInput id="email" placeholder="[email protected]" type="email" />
  </FormField>
  <FormField htmlFor="department" label="部署">
    <Select
      id="department"
      options={[
        { label: '開発部', value: 'dev' },
        { label: '営業部', value: 'sales' },
      ]}
      placeholder="選択してください"
    />
  </FormField>
</div>

アクセシビリティ

コンポーネントが内部で処理すること

htmlFor でラベルと入力要素を自動的に関連付ける
説明文に id="${htmlFor}-description" を付与し、aria-describedby での関連付けを可能にする
エラーメッセージに role="alert" と id="${htmlFor}-error" を付与する
required 時にラベルに視覚的な「*」マークを表示する（aria-hidden 付き）

利用者が対応すること

htmlFor の値と子要素の id を一致させること
エラー時は FormField の error と子要素の error の両方を指定すること
必要に応じて子要素に aria-describedby="${htmlFor}-description" を指定すること