Component Gallery

Form UI

フォームUIまとめ

フォームUIは、ユーザーから情報を受け取り、入力ミスを減らしながら完了まで導くための入力コンポーネント群です。

最終更新日: 2026-07-16 / レビュー状態: 未レビュー

30秒でわかる要点

フォームUIは、ユーザーから情報を受け取り、入力ミスを減らしながら完了まで導くための入力コンポーネント群です。

拾いたい検索意図

  • ・フォーム UI コンポーネントを知りたい
  • ・入力画面の構成を決めたい
  • ・フォームのエラー表示やアクセシビリティを整理したい

設計ポイント

  • ・1画面に入れる入力数を絞る
  • ・ラベル、補足、エラーを入力欄の近くに置く
  • ・保存タイミングと必須項目を明確にする

関連コンポーネント

テキスト入力（Input）テキスト入力（Input）は、ユーザーがテキストを入力するための単行・複数行フォームフィールド。バリデーション状態（エラー・無効）の表現も含む。テキストエリア（Textarea）テキストエリア（Textarea）は、複数行のテキストを入力するフォームフィールド。自動リサイズ・最大行数制限・文字数カウンターのバリアントを持つ。選択ボックス（Select）選択ボックス（Select）は、ドロップダウン形式で選択肢の一覧を表示し、ユーザーが選択するための入力コンポーネント。単一・複数選択のバリエーションがある。チェックボックス（Checkbox）チェックボックス（Checkbox）は、複数の選択肢からユーザーが任意の数を選択できるコンポーネント。グループで使用されることが多い。ラジオボタン（Radio Button）ラジオボタン（Radio Button）は、複数の選択肢から1つだけ選択させる入力コンポーネント。グループで使用し、排他的な選択を表現する。トグルスイッチ（Switch）トグルスイッチ（Switch）は、ON/OFFの2状態をトグル操作で切り替えるコンポーネント。設定画面の機能有効化・無効化に広く使われる。日付選択（Date Picker）日付選択（Date Picker）は、カレンダーUIを使って日付を入力・選択するコンポーネント。日付範囲の選択や和暦対応バリアントを持つ場合もある。スライダー（Slider）スライダー（Slider）は、トラックとサムで数値や範囲をスライド操作で入力するコンポーネント。価格フィルターや音量調整などに使用される。ファイルアップロード（File Upload）ファイルアップロード（File Upload）は、ファイルを選択またはドラッグ＆ドロップでアップロードするコンポーネント。ファイル種別・サイズ制限の表示やプレビュー機能を持つ場合もある。OTP入力（OTP Input）OTP入力（OTP Input）は、SMS認証やメール認証で使用する数桁のワンタイムパスワードを入力するコンポーネント。1桁ずつのセルに分かれ、入力時に自動フォーカス移動する。

関連画面パターン

ログイン画面（Login Screen）ログイン画面は、ユーザーが本人確認を行い、サービス内の個別領域へ入るための入口です。決済画面（Checkout Screen）決済画面は、商品、金額、配送、支払い方法、確認操作を誤解なく完了させるための画面です。入力ウィザード画面（Form Wizard Screen）入力ウィザード画面は、長いフォームを複数ステップに分け、進捗と保存状態を示しながら完了へ導く画面です。アカウントセキュリティ画面（Account Security Screen）アカウントセキュリティ画面は、パスワード、二要素認証、ログイン履歴、接続済み端末を安全に管理する画面です。

運営・更新・参照元

最終更新日
2026-07-16
レビュー状態
未レビュー

参照元

FAQ

フォームUIでは何から設計しますか？

まず検索意図や利用シーンを決め、input、textarea、selectなどの主要コンポーネントを画面目的に合わせて選びます。

フォームUIで避けるべきことは何ですか？

見た目の流行だけで部品を選び、ユーザーの判断・入力・移動の文脈を無視することです。

フォームUIの関連ページはどう辿るべきですか？

まずハブで主要コンポーネントを把握し、次に画面パターン、比較ページ、実装レシピの順に確認すると設計から実装までつなげやすくなります。