RadioButton

リストの中から1つの項目を選択

Example#

Props#

Name	Type	Default	Description
name required	`string`	`-`	グループ化（排他制御）したい要素には同じ名前をつける
value required	`string \| number`	`-`	選択時のコールバックで渡される値
children required	`ReactNode`	`-`	ラベルに表示されるテキストまたは要素
size	`"medium"` \| `"small"`	`medium`	サイズ
data-* optional	`string`	`-`	Custom data attributes

Usage#

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

項目をグルーピングし、タイトルをつける#

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

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

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

<RadioButton> を使用した選択肢が1つのコンテンツとして独立している場合<section> 要素で囲んでも良いでしょう。その場合、必ず見出し（<hx>）を添えてください。

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

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

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

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

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

Keyboard Interaction#

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