Accessibilityに配慮したカード状のラジオボタン

Example#

Props#

<input>要素をベースにしています。 表にない属性もprop経由で使用できます。

NameTypeDefaultDescription
blockbooleanfalse横幅を100%占有する
children
required
ReactNode-ラベルに表示されるテキストまたは要素
data-*
optional
string-Custom data attributes
name
required
string-グループ化(排他制御)したい要素には同じ名前をつける
value
required
string
number
-選択時のコールバックで渡される値

Feature#

  • 選択した後自動で遷移しないタイプのラジオボタン(選択してもなにもおきないボタン)に使用します
  • いわゆる「カード」の形をしています
    • クリック/タップ領域が大きく、比較的操作が容易です
    • ラベルが読みやすく、選択肢の内容を理解しやすいです
    • その代わり、領域を占有するデメリットも存在します

Usage#

  • 同じグループとなる項目には、同じ name 属性の値を設定します

<RadioGroup>で項目をグルーピングし、ラベルをつける#

できる限りグルーピングしてラベルをつけてください。選択肢を列挙しただけでは、何を意味する選択肢なのかをユーザーは理解できないかもしれません。

<RadioGroup>コンポーネントでまとめ、label propを指定してください。

<RadioGroup label="今日の気分">
  <RadioCard name="condition">良い</RadioCard>
  <RadioCard name="condition">悪い</RadioCard>
</RadioGroup>

<RadioGroup>を使用した選択肢が1つのコンテンツとして独立している場合、見出し(<hx>)とセットで使用してもよいでしょう。 その場合、label propは必須ではありません。

<section>
  <h2>本日の体調</h2>

  <RadioGroup>
    <RadioCard name="condition">良い</RadioCard>
    <RadioCard name="condition">悪い</RadioCard>
  </RadioGroup>
</section>

ラジオボタンか?チェックボックスか?もしくはセレクトボックスか?

「値を選ぶ」ことに対してはどれも要求を満たすことができます。しかしそれぞれ特性が違うため、状況に応じて使い分けが必要です。

  • ラジオボタンセレクトボックスは、複数の選択肢の中から一つを選択します
  • ラジオボタンは、一度選択したら、空に戻すことができません(空の選択肢を含めることで解決はできます)
  • セレクトボックスは、一度選択したら、空に戻すことができません(空の選択肢を含めることで解決はできます)
  • セレクトボックスは、大量の選択肢を用意しても領域を占有しません
  • セレクトボックスは、選択肢が隠れるためユーザーが内容を把握しづらい一面があります
  • チェックボックスには2つの使用方法があります
    • 複数の選択肢から、複数を選択します
    • もしくは、ひとつの選択肢の選択を切り替えます
  • チェックボックスは、値を空に戻すことができます

Keyboard Interaction#

  • Tabキーでフォーカスすることができます
  • カーソルキーの上下で選択を切り替えることができます