kaze風
Input
テキスト入力
プレビュー
使いどころ
使う場面
- 氏名、メールアドレス、検索語など、1 行で収まる自由入力
- type で用途を指定する（email、tel、url、password）。モバイルのキーボードと自動入力が合う
- 検証に失敗した状態は error で赤枠にし、理由は FormField の error か近くの文言で伝える
使わない場面
- 数量・金額・割合などの数値。カンマ区切り、全角入力、増減ボタンが要るなら NumberField
- 日付。書き方のゆれと和暦の入力を受けたいなら DatePicker
- 改行を含む長文。Textarea を使う
- 選択肢が決まっている入力。Select（少数）か Combobox（多数）にして、打ち間違いをなくす
使い方
<Input placeholder="入力してください" />プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
error | boolean | false | エラー状態を表示するかどうか |
aria-describedby | string | なし | 補足やエラー文言の要素 ID。FormField で包むと自動で結ばれる |
className | string | undefined | 追加のCSSクラス名 |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
キーボード操作
| キー | 動作 |
|---|---|
| Tab | 入力欄にフォーカスを移す |
アクセシビリティ
- ラベルは必ず用意する。placeholder はラベルの代わりにならない。FormField で包むと label と関連付く
- error だけでなく aria-invalid も付く（FormField の error でも付く）。色だけで伝えず、エラー文言を添える
- 補足やエラーの文言は aria-describedby で結ぶ。FormField が自動で結ぶ
文言
- placeholder は入力例にとどめる（「例: 相楽 実咲」）。形式の説明は FormField の description に書く