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="キャラクター" />

Copied!

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>
)

Copied!

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

PreviousCheckbox NextSwitch