Material Design コンポーネントまとめてみた Radio button編

ラジオ ボタンを使用すると、一連のオプションから 1 つのオプションを選択できます

□ 公式に書かれていること

⚡リストから項目を 1 つだけ選択できる場合は、ラジオ ボタン (スイッチではなく) を使用します。
⚡ラベルのテキストが視覚的に明確で、ユーザーが簡単に目で追いやすい
⚡選択されたアイテムは、選択されていないアイテムよりも目立ちます

□ よくある使い方と特徴

• ユーザーがオプションのリストから 1 つを選択できるようにするには、ラジオ ボタンを使用することをお勧めします

• 一度に選択できるラジオ ボタンは 1 つだけです。

• ラジオ ボタンを使用して次のことを行います。

  • リストから 1 つのオプションを選択します

  • ユーザーに対して選択可能な全てのオプションを一覧で表示する

• オプションが 5 つ以下の場合は、ラジオ ボタンを使用します。

□ 利点：明確な選択

• ラジオボタンは、利用可能なオプションを一目で確認でき、その中から1つだけを選択するという、ユーザーの意図を明確にするインターフェイスを提供します。ユーザーは一覧から直感的に1つのオプションを選択できるため、選択プロセスがシンプルで分かりやすくなります。これが、ユーザビリティの向上につながります。

使い方NG例

ネストしない

複数のオプションを選択したりしないでください。

✨スタイル

1. Icon

以上！次回はProgress indicatorsについてまとめていきます！

参考
引用元 Google - Material Design
URL：https://material.io/