選択系UI(ラジオボタン、プルダウン、トグルスイッチ、チェックボックス)の使い分けまとめ

今回はフロントエンドの開発をしていく上で気になったForm input & controlの選択系UIパーツの使い分けについてまとめて行きます。

Form input & control の選択系UIパーツって何があるの??

ユーザーに選択肢の中から選んでもらう系のUIですね。

vuetify を参考に見て行きましょう。

Selects Sliders などもありますが、混同しやすいこちらの3つを比較して行きます。

  1. Radio buttons
  2. Switches
  3. Checkboxes
  4. Selects

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パーツでしたが、正しい用法を理解するべきだなと改めて感じました。

 

コーヒーをマグカップで飲む頻度が上がったので最近買ったコースターを添付。

 

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Compare ×
Let's Compare! Continue shopping