CheckboxCard

Example#

Feature#

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

Usage#

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

できる限りグルーピングしてラベルをつけてください。選択肢を列挙しただけでは、何を意味する選択肢なのかをユーザーは理解できないかもしれません。 <CheckboxGroup>コンポーネントでまとめ、label propを指定し、name属性に同じ値を指定してください。

<CheckboxGroup label="あてはまるものを選んでください">
  <CheckboxCard name="symptoms">選択肢A</CheckboxCard>
  <CheckboxCard name="symptoms">選択肢B</CheckboxCard>
  <CheckboxCard name="symptoms">選択肢C</CheckboxCard>
  <CheckboxCard name="symptoms">この中に該当なし</CheckboxCard>
</CheckboxGroup>

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

<section>
  <h2>症状を教えて下さい</h2>

    <CheckboxGroup>
      <CheckboxCard name="symptoms">選択肢A</CheckboxCard>
      <CheckboxCard name="symptoms">選択肢B</CheckboxCard>
      <CheckboxCard name="symptoms">選択肢C</CheckboxCard>
      <CheckboxCard name="symptoms">この中に該当なし</CheckboxCard>
    </CheckboxGroup>
</section>

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

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

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

Keyboard Interaction#

• Tabキーでフォーカスすることができます
  • フォーカスした状態で、Spaceキーを押下することで選択状態を切り替えることができます