チェックボックス(概要)

チェックボックスは、複数の項目の中から複数の選択肢を選ぶことを可能にします。また、ひとつの選択肢のオン・オフの切り替えにも用いることができます。
仕様
パーツ

- チェックボックス 
- 選択肢ラベル 
使い方
設計の原則
- 複数の選択肢からひとつの項目しか選択できない場合は、必ずラジオボタンを使用してください。
- チェックボックスはテキストの左側に配置してください。画面を拡大表示している利用者でも見つけやすくなります。
- ラベルテキストは入力項目を端的に表現してください。入力項目が1つしかなく、その意味を画面タイトルなどで明確に説明できる場合は省略可能です。
良い例

複数の選択肢を選ぶことができる質問に使用しています。
悪い例

単一回答を求める質問に使用しています。この場合は、ラジオボタンを使用してください。
各種リソース
| 種別 | リソース | 状態 | 
|---|---|---|
| デザイン | デザインデータ(Figma) | 提供中 | 
| 実装 | ソースコード(HTML+CSS) | 提供中 | 
| サンプル(HTML+CSS) | 提供中 | |
| ソースコード(React+Tailwind CSS) | 提供中 | |
| サンプル(React+Tailwind CSS) | 提供中 |