フォーム入力
入力をラクに、ミスなく導く工夫。
入力を求める部品のカテゴリ。テキストフィールド・セレクト・ラジオといった基本部品から、リアルタイム検証・入力マスク・文字数カウンタ・パスワード強度のような「ミスを起こす前に止める」仕掛け、ステップフォームやログイン・新規登録のような画面単位の型まで揃う。原則はエラーの防止と回復。フォームの離脱はほとんどが送信後の赤字で起きるので、入力中に形式を整え、その場で判定し、直し方を示すほうが安い。フォームの完了率が低い、エラーの場所が分からないと言われる、そんな画面を組み直すときに引く。
使い分けまず text-field で状態（通常／フォーカス／エラー）の見た目を決める。形式が決まっている入力は input-mask、判定を即返すなら inline-validation。選択肢が少なければ radio-group、多ければ select-dropdown、検索が要るなら autocomplete / combobox。長い入力は multi-step-form に分ける。
まず見る3件
- 入力
テキストフィールド
Text Field
ラベル・補助テキスト付きの基本の入力欄。フォーカスで枠色とリングが変わり、通常状態とエラー状態を並べて比べられる。
- フォーカスは枠色＋3px の半透明リング。枠色だけだと、色の見分けが難しい人には移動が分からない
- 補助文はエラーが出ても同じ場所に出す。位置が変わると、直したあとに何を読めばよいか探させる
- エラーはアイコン・色・文言の3つで示す。赤い枠だけでは何が間違いか分からない
- JS
- 入力
リアルタイム検証解説あり
Inline Validation
メールアドレスを入力すると形式を即時判定し、✓（緑）/ ✗（赤）とメッセージでフィードバックする。
- 結果は枠色・アイコン・文言の3つで出す。緑と赤の枠だけでは、色の見分けが難しい人に伝わらない
- 空欄は無印に戻す。消したのに ✗ が残ると、何を直せばよいか分からない
- 見本は毎打鍵で判定するが、実運用は初回 blur まで保留し、一度エラーが出た欄だけ入力中も再評価するのが穏当
- JS
- クリック
セレクト
Select / Dropdown
ボタンを押すとリストボックスが開くカスタムのセレクト。矢印キー・Enter・Escで操作でき、選択中の項目にはチェックが付く。
- フォーカスはボタンに留め、リスト内の位置は aria-activedescendant で伝える。リストへフォーカスを移すと Esc で戻す処理が要る
- 開いたときのハイライトは選択中の項目に置く。先頭固定だと、いまの値を確かめるために一度スクロールさせる
- 選択中はチェック印＋太字。ハイライト（背景色）と混ぜると「選ばれている」と「いま指している」が区別できない
- JS
使い分け表
| パーツ | 操作 | 技術 | 向く場面 | 状態 |
|---|---|---|---|---|
| フローティングラベル Floating Label | 入力 | JS | 氏名・メールなど短いラベルの省スペースなフォーム・初期値が入る編集フォーム（is-filled で浮上位置が正しい） | default / focus |
| リアルタイム検証 Inline Validation | 入力 | JS | メール・郵便番号など形式を機械的に判定できる欄・送信前に体裁の誤りだけ早く気づかせたいフォーム | default / focus / error / success |
| パスワード表示切替 Password Visibility Toggle | 入力 | JS | ログイン・登録フォームのパスワード欄・スマホで入力ミスを確認させたい認証画面 | default / hover / focus |
| 文字数カウンタ Character Counter | 入力 | JS | コメント・SNS 投稿など上限のある短文入力・残り文字数を意識しながら調整させたい欄 | default / focus |
| レンジスライダー Range Slider | ドラッグ | JS | 満足度・音量など1つの値を大まかに決める入力・値をリアルタイムに大きく表示したい設定画面 | default / hover / active |
| 日付ピッカー Date Picker | クリック | JS | 予約日・誕生日など特定の1日を確定させる入力・日付の書式を覚えさせたくないフォーム | default / hover / focus / active |
| タグ入力 Tag Input (Chips) | 入力 | JS | 記事タグ・スキルなど自由語を複数積むフォーム・Enter や「,」で区切って素早く追加させたい入力 | default / hover / focus |
| 入力マスク Input Mask | 入力 | JS | 電話番号・郵便番号など桁が決まった数値入力・ハイフンを自動で入れてカーソル位置を保ちたい欄 | default / focus |
| 星評価 Star Rating | クリック | JS | レビュー・満足度の5段階評価・ホバーで仮の値、クリック／タップで確定させたい入力 | default / hover / active |
| オートコンプリート Autocomplete | 入力 | JS | 都道府県・駅名など数十件の有限候補から選ぶ入力・候補に無い自由入力も許したい欄 | default / hover / focus / active / empty |
| ステップフォーム Multi-Step Form (Wizard) | 入力 | JS | 会員登録・予約など意味のまとまりで分かれる長いフォーム・進捗を見せて離脱を減らしたい手続き | default / hover / focus / error / disabled / success |
| ドラッグ&ドロップ アップロード Drag & Drop File Upload | ドラッグ | JS | PC のドラッグとスマホのタップを同じ枠で受ける単一ファイル送信・ファイル名と進捗バーをその場で見せたい画面 | default / focus / active / loading / success |
| ワンタイムコード入力 OTP Input | 入力 | JS | SMS・メールの6桁確認コード入力・1桁打つごとに次へ進めたい認証画面 | default / focus / success |
| コンボボックス（検索＋複数選択） Combobox (multi-select) | 入力 | JS | 担当者・ラベルなど候補から複数選んでチップに積む入力・検索で絞ってから選ばせたい割り当て画面 | default / hover / focus / active / empty |
| テキストフィールド Text Field | 入力 | JS | フォームの基本となるラベル＋補助文付き入力欄・通常とエラーの見た目を揃えたいデザインシステム | default / focus / error / success |
| 自動リサイズテキストエリア Auto-grow Textarea | 入力 | JS | チャット・メッセージなど行数が読めない入力・空欄は1行、書くほど伸ばしたい欄 | default / focus |
| セレクト Select / Dropdown | クリック | JS | プラン・地域など数個〜十数個から1つ選ぶ入力・ネイティブ select より見た目を揃えたいフォーム | default / hover / focus / active |
| ラジオボタン Radio Group | クリック | JS | 支払い方法など説明付きの選択肢を1つ選ぶ入力・選択肢をカードで大きく押しやすくしたいフォーム | default / hover / focus / active |
| 検索バー Search Bar | 入力 | JS | サイト・アプリのヘッダーに置くキーワード検索・入力があるときだけクリアを出したい欄 | default / hover / focus / active |
| パスワード強度メーター Password Strength Meter | 入力 | JS | 登録・変更フォームのパスワード欄・長さと文字種から強度を段階で見せたい入力 | default / hover / focus |
| ログインフォーム Login Form | 入力 | JS | メール＋パスワードの定番ログイン画面・送信中をボタン内スピナーで見せたい認証 | default / hover / focus / active / disabled / loading / success |
| 新規登録フォーム Sign Up Form | 入力 | JS | 氏名・メール・パスワード・規約同意の新規登録・欄を離れた時点で検証しその場で直させたい入力 | default / hover / focus / active / error / success |
すべての見本（22件）
- 入力
フローティングラベル解説あり
Floating Label
フォーカスするとラベルが枠の上にスッと浮き上がる入力欄。省スペースで、いま何を入力中か直感的に分かる。
- JS
- 入力
リアルタイム検証解説あり
Inline Validation
メールアドレスを入力すると形式を即時判定し、✓（緑）/ ✗（赤）とメッセージでフィードバックする。
- JS
- 入力
パスワード表示切替解説あり
Password Visibility Toggle
目のアイコンをクリックするとパスワードの表示・非表示を切り替えられる。入力ミスを確認しやすい。
- JS
- 入力
文字数カウンタ解説あり
Character Counter
テキストエリアの残り文字数をリアルタイム表示。上限に近づくと色が変わり、超過を防ぎやすい。
- JS
- ドラッグ
レンジスライダー
Range Slider
スライダーを動かすと値がリアルタイムに数値表示され、達成部分のトラックに色が乗る。
- JS
- クリック
日付ピッカー解説あり
Date Picker
入力欄をタップするとカレンダーが開き、日を選ぶと入力される。月の前後移動にも対応。
- JS
- 入力
タグ入力
Tag Input (Chips)
入力してEnterでタグ（チップ）が追加され、×ボタンで削除できる。日本語タグの初期表示あり。
- JS
- 入力
入力マスク
Input Mask
電話番号を入力すると自動整形（03-1234-5678 形式）。数字以外は無視され、入力がスムーズになる。
- JS
- クリック
星評価
Star Rating
星にホバー（PC）またはタップ（スマホ）で評価を選択。選んだ値をテキストで表示する。
- JS
- 入力
オートコンプリート解説あり
Autocomplete
入力に応じて候補リストを絞り込み表示。↑↓キーやタップで選択でき、選ぶと入力欄に反映される。都道府県など日本語ダミー候補つき。
- JS
- 入力
ステップフォーム解説あり
Multi-Step Form (Wizard)
3ステップ（基本情報→住所→確認）を進捗バー付きで切り替え。次へ/戻るボタンと必須チェックを備え、最後に入力内容を確認表示する。
- JS
- ドラッグ
ドラッグ&ドロップ アップロード解説あり
Drag & Drop File Upload
点線の枠にファイルをドラッグするか、クリック/タップで選択。ファイル名と疑似プログレスバーで進捗を表示する。
- JS
- 入力
ワンタイムコード入力
OTP Input
6桁の区切り入力フォーム。1文字入力で次マスへ自動移動、Backspaceで前へ戻る。全桁入力で確認演出、ペースト時は各マスに自動分配。
- JS
- 入力
コンボボックス（検索＋複数選択）
Combobox (multi-select)
入力で候補を絞り込み、選ぶとチップとして入力欄に積み上がる複数選択UI。×で削除、↑↓とEnterのキーボード操作にも対応。
- JS
- 入力
テキストフィールド
Text Field
ラベル・補助テキスト付きの基本の入力欄。フォーカスで枠色とリングが変わり、通常状態とエラー状態を並べて比べられる。
- JS
- 入力
自動リサイズテキストエリア
Auto-grow Textarea
入力量に合わせて高さが自動で伸びるテキストエリア。scrollHeight に合わせて高さを更新し、文字数カウンタも連動する。
- JS
- クリック
セレクト
Select / Dropdown
ボタンを押すとリストボックスが開くカスタムのセレクト。矢印キー・Enter・Escで操作でき、選択中の項目にはチェックが付く。
- JS
- クリック
ラジオボタン
Radio Group
選択肢をカード状に並べたラジオグループ。ネイティブの input を使うので矢印キーで移動でき、選んだカードだけ枠と丸が色づく。
- JS
- 入力
検索バー
Search Bar
先頭に虫めがねアイコンを置いた検索入力。文字を入れるとクリア（×）ボタンが現れ、押すと入力が消えてフォーカスが戻る。
- JS
- 入力
パスワード強度メーター
Password Strength Meter
表示/非表示トグル付きのパスワード欄。長さと文字種の多さから強度を判定し、弱い/普通/強いのバーとラベルがリアルタイムに変化する。
- JS
- 入力
ログインフォーム
Login Form
メール・パスワード・「ログイン状態を保持」チェック・送信ボタン・パスワード再発行リンクを備えた定番のログイン画面。送信すると短いローディング演出が出る。
- JS
- 入力
新規登録フォーム
Sign Up Form
お名前・メール・パスワード（簡易強度表示）・利用規約同意を備えた新規登録フォーム。各欄はフォーカスを外した時点で検証し、問題があればその場でメッセージを出す。
- JS