ウェブページやアプリケーションの「入力フォーム」についての記事です。
主に、これからUI設計をはじめる方へ向けた内容です。
アンケートや、コンテンツ登録、設定画面など、入力フォームを作成する際に、「ラジオボタン」「チェックボックス」「セレクト」など、各項目をどの方式とするのがよいか迷うことがあります。
今回は「選択式」のUIコンポーネントに注目して、整理してみたいと思います。
なお、各UIコンポーネントの名称や詳細仕様は、開発、制作するシステムによって異なります。
その点については、過去の記事「そのUIどう呼ぶ？チームの認識を揃えるためのコンポーネント名称整理」を御覧ください。https://tech-lab.sios.jp/archives/48327
基本偏
まず、下記の3つのコンポーネントで、多くのケースをカバーできます。
- 選択できる数が「1件」で、選択肢が「2〜5件程度」の場合は『ラジオボタン』
- 選択できる数が「1件」で、選択肢が「5件以上」の場合は『セレクト』
- 選択できる数が「複数」であれば『チェックボックス』
| ラジオボタン | セレクト | チェックボックス | |
| 選択できる数 | 1件 | 1件 | 複数 |
| 選択肢の数 | 2〜5件程度 | 5件程度以上 | – |
 |  |  |
選択肢が2件（2択）の場合は、次のように内容を考慮して、コンポーネントを選びます。
「on/off、有効/無効、有/無、はい/いいえ、必要/不要」のように、端的な排他の選択の場合は「ラジオボタン」か「チェックボックス」のどちらかを利用します。
2択でも、色を選択する場合など、選択肢それぞれに固有の意味がある場合は「ラジオボタン」です。
| ラジオボタン | チェックボックス | |
| 2択で、排他的な選択肢の場合 |  |  |
| 2択だが、選択肢に固有の意味がある場合 |  | （チェックボックスは利用しない） |
発展編
ユーザー層が広い場合は「基本編」のUIコンポーネントで構成するのがよいでしょう。
業務システムなど、操作に慣れたユーザーが利用する場合は、以下のコンポーネントも利用することで、操作が効率的になる場合があります。
複数選択のセレクト
選択可能な数が複数の場合は、「チェックボックス」がよいですが、選択肢が多く小さなスペースに収めたい場合は、「セレクト」を複数選択可能（multiple）な状態にして、利用するとよいでしょう。
ただし、HTML標準の複数選択可能なセレクトで実装した場合、モバイル（スマートフォン等）のブラウザでは、複数選択できることが分かりやすい表現になっていますが、デスクトップ（パソコン）のブラウザでの表示は、分かりにくい場合が多いです。
これを対応する場合は、既存のUIライブラリを利用して、セレクトの選択肢部分にチェックボックスを表示させると、良いでしょう。
次の図は「MUI」の例です。
https://mui.com/material-ui/react-select/#checkmarks
コンボボックス（オートコンプリート、データリスト）
選択以外に、テキスト入力（自由入力）をあわせたい場合はコンボボックスです。
テキストを入力すると、選択肢が絞り込まれて表示されます。
なお、コンボボックスやオートコンプリートと呼ばれるコンポーネントでは、自由入力を受け付けないバリエーションもあります。
複数の項目選択を選択できるバリエーションもあります。
また、入力中の選択肢の絞り込みは、前方一致の場合の他に、部分一致の場合もあります。
デイトピッカー
日付を入力する場合、デイトピッカーにすることで、テキストでの入力に加えて、カレンダーから日付を選択して、入力させることができます。
カレンダー形式は、一覧性や、俯瞰しやすいため、直感的に素早く入力できる場合があります。
トグル（スイッチ）
スマートフォンの登場により、よく目にするようになったのが「トグル（スイッチ）」。
見た目がキャッチーなので、つい配置したくなるコンポーネントですが、注意が必要です。
チェックボックスと同じく、on/off（有効/無効）を切り替えるものですが、トグルは基本的に情報入力フォームでは利用しません。
即時反映を期待させるUIであるため、「保存」や「登録」ボタンのある入力フォームの中に混ぜると、ユーザーが混乱します。（いつ反映されたか分からない）
トグルは、主に設定画面や表示切り替えにて利用します。
事例編
最後に「会員登録」フォームを例に、各入力情報に対してどの入力形式が適しているか考えてみたいと思います。
性別
「ラジオボタン」が良いでしょう。
小さいスペースに収めたい場合は「セレクト」に。
生年月日
「生年月日」は、何年もさかのぼることが多く、記憶している数字列をそのまま入力するので、デイトピッカーではなく、セレクト、または、テキストフィールドが向いています。
テキストフィールドとする場合、「年」「月」「日」と分けたほうが親切ですが、業務システムなど、何度も利用する場合は「年月日」をまとめるほうがよいでしょう。
予定日、実施日、希望日など
生年月日と異なり、予約日やイベントの日付を指定する場合は、今日を起点として予定日が近いケースが多く、カレンダー形式で予定を想像しながら入力できるように「デイトピッカー」を利用して、テキスト入力とピッカー（選択）入力両方を可能とするのが良いでしょう。
ピッカーの場合、最短で2クリック（2タップ）で入力が完了する場合もあります。
都道府県
47都道府県から1つ選ぶ場合「セレクト」が良いでしょう。
工夫としては、「東北」「近畿」など、選択肢をグループに分けると項目を見つけやすくなります。（HTML標準では「optgroup」）
また、選択肢は北から南に並んでおり、ユーザーは上から選択肢をだどるのが一般的ですが、デフォルトを愛知県と三重県の間にしておくと、南の地域へのスクロール量が減り、ユーザー全体を平均して効率化が期待できます。
上記は、あくまで基礎的な内容です。
想定するユーザーや、分野、情報量、画面上の流れなど、場合によって適したUIコンポーネントは変わります。
具体的なケースに合わせて、ユーザーが入力しやすい画面をつくりましょう。
