Checkbox

Example#

Usage#

• 同じグループとなる項目には、同じ name 属性の値を設定します
• 複数の選択肢を扱う場合、できる限り項目のグルーピングとキャプションの記述をしてください
• 単体での利用の場合、キャプションをつけなくても良い場合があります。Checkboxを使った設定の意図を、ラベルが十分に説明している場合のみ、キャプションは省略可能です
  • 例: 「ニュースレータの受け取り」オプション、「利用規約への同意」オプションなど

グルーピングとラベル#

<CheckboxGroup> 及び label propを使用してください

<CheckboxGroup label="候補日">
  <Checkbox>3/10</Checkbox>
  <Checkbox>3/11</Checkbox>
</CheckboxGroup>

role=group と aria-labelledby でも対応可能です。

<div role="group" aria-labelledby="heading-payament-options">
  <Text id="heading-payament-options" as="legend" type="heading" size="xs">
    候補日
  </Text>

  <Checkbox>3/10</Checkbox>
  <Checkbox>3/11</Checkbox>
</div>

ただし、この方法はすべてのブラウザと支援技術に対応しているわけではありません。<CheckboxGroup> を使用することをおすすめします。

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

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

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

Accessibility#

Keyboard Interaction#

• Tabキーでフォーカスできます
• Spaceキーで選択/未選択を切り替えることができます