RadioCard
View on GitHub: CopmonentAccessibilityに配慮したカード状のラジオボタン
Example#
Props#
<input>
要素をベースにしています。 表にない属性もprop経由で使用できます。
Name | Type | Default | Description |
---|---|---|---|
block | boolean | false | 横幅を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キーでフォーカスすることができます
- カーソルキーの上下で選択を切り替えることができます