今回はフロントエンドの開発をしていく上で気になったForm input & controlの選択系UIパーツの使い分けについてまとめて行きます。
目次
Form input & control の選択系UIパーツって何があるの？？
ユーザーに選択肢の中から選んでもらう系のUIですね。
vuetify を参考に見て行きましょう。
Selects やSliders などもありますが、混同しやすいこちらの3つを比較して行きます。
Radio buttons
以下のようなボタン形式のUIです。
Radio buttonsは排他的な選択肢で、ユーザーに1つを選ばせる時に向いています。
Switches
トグルスイッチとも呼ばれます。
以下のようなスイッチ風でパチっパチっとon/offを切り替える様なイメージのUIです。 2つの選択肢から1つを選ばせる際に使います。
Checkboxes
以下のようなチェックリスト形式のUIです。
Checkboxesはユーザーに複数の選択肢を選ばせる際に向いています。
Selects
プルダウンとも呼ばれます。
選択肢をデフォルトで表示していない為、ユーザーに大量の選択肢の中から選ばせる際に向いています。
使い分け
以下、お互いの違いの早見表です。
上記の表からまとめると、それぞれの用途は以下の様になります。
Switches
2つの選択肢から1つを選ばせる時
例）
- on/off
- する/しない
- あり/なし
- 性別(男性/女性)
Radio buttons
複数の選択肢から1つを選ばせる時
例）
- 経歴（高卒/大卒/院卒）
- 配属（A支社/B支社など）
Checkboxes
複数の選択肢から複数を選ばせる時
例）
- 経験職種(コーダー/フロントエンド/サーバーサイド/インフラ/デザイナーなど)
- 担当工程（企画/要件定義/設計/コーディング/テスト/運用）
Selects
デフォルトで表示しておくには多い数の選択肢から選ばせる時
例）
- 住所(都道府県)
- 出身国(国名)
まとめ
今までなんとなくで使い分けていたUIパーツでしたが、正しい用法を理解するべきだなと改めて感じました。
コーヒーをマグカップで飲む頻度が上がったので最近買ったコースターを添付。