Checkbox
Checkboxは、ユーザーが複数の選択肢の中から複数の値を選択するための使用されるコンポーネントです。
Checkboxは、アクセシビリティに関してWAI-ARIA - Checkbox Patternに従います。
Fieldsetを使用しない場合は、CheckboxGroupにaria-labelまたはaria-labelledbyを設定します。
<CheckboxGroup aria-label="キャラクター"><Checkbox value="孫悟空">孫悟空</Checkbox><Checkbox value="ベジータ">ベジータ</Checkbox><Checkbox value="フリーザ">フリーザ</Checkbox></CheckboxGroup>
<VStack gap="sm"><Heading as="h3" id="label">キャラクター</Heading><CheckboxGroup aria-labelledby="label"><Checkbox value="孫悟空">孫悟空</Checkbox><Checkbox value="ベジータ">ベジータ</Checkbox><Checkbox value="フリーザ">フリーザ</Checkbox></CheckboxGroup></VStack>
キーボード操作
| キー | 説明 | 状態 |
|---|---|---|
Tab | 無効ではないチェックボックスをフォーカスします。 | - |
Space | チェックボックスのチェックの状態を切り替えます。 | - |
| チェックボックスを3つ(チェック済み、チェックなし、中間)の状態に切り替えます。 | isIndeterminate={true} |
ARIAロールと属性
| コンポーネント | ロールと属性 | 使い方 |
|---|---|---|
CheckboxGroup | role="group" | チェックボックスのグループであることを示します。 |
aria-labelledby | CheckboxGroupがFormControl内にあり、FormControlにlabelまたはLabelが設定されている場合は、そのidを設定します。 | |
Checkbox | id | isIndeterminate={true}が設定されたチェックボックスに関連付けるために使用するid。 |
aria-checked | チェックボックスがチェックされている場合は"true"を設定し、チェックされていない場合は"false"を設定します。中間状態の場合は"mixed"を設定します。 | |
aria-controls | isIndeterminate={true}が設定されている場合に、制御するチェックボックスのidを設定します。 |
GitHubでこのページを編集する