FormField

フォームフィールド

GitHub でソースを見る

プレビュー

フルネームを入力してください

45 / 200

使いどころ

使う場面

  • Input、Select、Textarea、Combobox、DatePicker に、ラベル・説明・エラー・文字数を付けるとき
  • 必須項目は required。ラベルの末尾に * が付き、コントロールに required と aria-required が渡る
  • エラーは error に文言を渡す。コントロールに aria-invalid が付き、文言は role="alert" で読まれる

使わない場面

  • RadioGroup、NumberField。これらは label と errorMessage を自前で持つので、FormField で二重に包まない
  • Checkbox や Switch 単体。ラベルを持つので、補足が要るときだけ使う
  • 子に複数のコントロールを渡すこと。children は 1 つの要素だけ。複数並べるなら要素ごとに FormField を使う
  • エラー文言のないエラー表示。必ず何が間違いかを書く

使い方

<FormField label="メール" error="入力してください">
  <Input />
</FormField>

プロパティ

名前型デフォルト説明
labelstringなしフィールドのラベル
descriptionstringなしフィールドの説明テキスト
errorstringなしエラーメッセージ
requiredbooleanfalse必須フィールドかどうか
maxLengthnumberなし最大文字数（カウンター表示用）
currentLengthnumberなし現在の文字数（カウンター表示用）
childrenReactElementなしフォーム部品（Input、Select、Textarea など）。id と aria 属性が自動で結ばれる

型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。

アクセシビリティ

  • label の htmlFor、コントロールの id、aria-describedby を自動で結ぶ。コントロールに id があればそれを使う
  • aria-describedby には description、error、カウンターの順で並ぶ。コントロール自身の指定は末尾に残る
  • error は role="alert" で、表示された時点で読み上げられる。入力中に毎回エラーを出すと読み上げが多すぎるので、確定時に出す
  • maxLength はカウンターだけを出す。入力を止めるには、コントロールにも maxLength を渡す。残り 10 文字以下で aria-live="polite" になる

文言

  • label は「メールアドレス」のような名詞。必須は required で示し、文言に「(必須)」と書かない
  • description は入力前に読むヒント（書式、上限、使い道）。エラーは入力後に読む修正方法。同じことを繰り返さない
  • エラー文言は何が間違いで、どう直すかを書く（「@ を含むメールアドレスを入力してください」）

関連するコンポーネント