入力
Inputs入力系コンポーネントの一覧、共通ルール、迷いやすい使い分けをまとめたカテゴリ概要です。完成例を見るページではなく、どのコンポーネントから確認するべきかを判断するための入口です。
コンポーネント一覧
入力系に含まれるコンポーネント、役割、代表的な用途をカテゴリごとに確認できます。サムネイルはページを重くしないため、挙動を再現しすぎない軽量プレビューにしています。
文字と数値
ユーザーが直接値を書き込む基本入力です。
選択
候補から選ぶ、または状態を切り替える入力です。
日時と範囲
日付、時刻、連続値を扱う入力です。
補足情報
一覧でコンポーネントを選んだあとに確認する、入力全体のルールと判断基準です。
入力の共通ルール
個別コンポーネントの見た目より先に、入力体験として揃えるべきルールです。
ラベルは操作対象と紐づける
Input、Checkbox、RadioGroup などは、表示ラベルと操作対象をアクセシブルに接続します。
補助テキストとエラーは同じ領域で扱う
通常時は説明、検証後はエラーを表示し、入力中に不要なエラーを出しすぎないようにします。
無効化には理由を付ける
操作できない理由は Tooltip と補助テキストで補足します。見た目だけで終わらせません。
幅と高さはフォーム単位で揃える
入力欄、セレクト、ボタン、補助 UI が同じフォーム内でばらつかないようにします。
保存や失敗にはフィードバックを返す
保存、アップロード、編集確定などの操作には Toast やインライン表示で結果を返します。
迷いやすい使い分け
似た入力を見た目だけで選ばないための判断基準です。
Select と Combobox
候補が少なく固定なら Select。候補が多く検索が必要なら Combobox。
Checkbox と Switch
フォーム送信まで確定しない同意や選択は Checkbox。即時反映される設定は Switch。
Slider と RangeSlider
1つの値なら Slider。最小値と最大値を同時に扱うなら RangeSlider。
InputOTP と専用入力
OTP は確認コード専用。電話番号、郵便番号、パスワード条件表示は別コンポーネント候補として扱います。
今後追加する候補
今回の Inputs 整備で必要性が見えたものです。個別対応ではなく、GunjoUI コンポーネントとして設計します。
候補の追加は、SSOT、docs、デモ、アクセシビリティ、無効化理由、入力幅ルールまで含めて扱います。