CheckboxCard
CheckboxCard
is a component used for allowing users to select multiple values from multiple options.
The CheckboxCard
follows the WAI-ARIA - Checkbox Pattern for accessibility.
If you are not using Fieldset
, set aria-label
or aria-labelledby
to CheckboxCardGroup
.
const items = useMemo<CheckboxCardItem[]>(() => [{ label: "ドラえもん", value: "ドラえもん" },{ label: "ドラミ", value: "ドラミ" },{ label: "ガチャ子", value: "ガチャ子" },],[],)return <CheckboxCardGroup items={items} aria-label="キャラクター" />
const items = useMemo<CheckboxCardItem[]>(() => [{ label: "ドラえもん", value: "ドラえもん" },{ label: "ドラミ", value: "ドラミ" },{ label: "ガチャ子", value: "ガチャ子" },],[],)return (<VStack gap="sm"><Text as="h3" id="label">キャラクター</Text><CheckboxCardGroup items={items} aria-labelledby="label" /></VStack>)
Keyboard Navigation
Key | Description | State |
---|---|---|
Tab | Focuses on a checkbox that is not disabled. | - |
Space | Toggles the checked state of the checkbox. | - |
ARIA Roles and Attributes
Component | Roles and Attributes | Usage |
---|---|---|
CheckboxCardGroup | role="group" | Indicates that it is a group of checkboxes. |
aria-labelledby | If CheckboxCardGroup is within FormControl and FormControl has a label or Label set, set its id . | |
CheckboxCard | aria-checked | Set to "true" if the checkbox is checked, "false" if it is not checked. |
Edit this page on GitHub