Checkbox

Checkbox is a component used for allowing users to select one option from multiple choices.

The Checkbox follows the WAI-ARIA - Checkbox Pattern for accessibility.

If you are not using Fieldset, set aria-label or aria-labelledby to CheckboxGroup.

<CheckboxGroup aria-label="キャラクター">
  <Checkbox value="孫悟空">孫悟空</Checkbox>
  <Checkbox value="ベジータ">ベジータ</Checkbox>
  <Checkbox value="フリーザ">フリーザ</Checkbox>
</CheckboxGroup>

Copied!

<VStack gap="sm">
  <Heading as="h3" id="label">
    キャラクター
  </Heading>

  <CheckboxGroup aria-labelledby="label">
    <Checkbox value="孫悟空">孫悟空</Checkbox>
    <Checkbox value="ベジータ">ベジータ</Checkbox>
    <Checkbox value="フリーザ">フリーザ</Checkbox>
  </CheckboxGroup>
</VStack>

Copied!

Key	Description	State
`Tab`	Focuses on a checkbox that is not disabled.	-
`Space`	Toggles the checked state of the checkbox.	-
	Toggles the checkbox between three states (checked, unchecked, indeterminate).	`isIndeterminate={true}`

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`CheckboxGroup`	`role="group"`	Indicates that it is a group of checkboxes.
	`aria-labelledby`	If `CheckboxGroup` is within `FormControl` and `FormControl` has a `label` or `Label` set, set its `id`.
`Checkbox`	`id`	The `id` used to associate with a checkbox that has `isIndeterminate={true}` set.
	`aria-checked`	Set to `"true"` if the checkbox is checked, `"false"` if it is not checked, and `"mixed"` if it is in an indeterminate state.
	`aria-controls`	Set the `id` of the checkbox to be controlled if `isIndeterminate={true}` is set.

Edit this page on GitHub

PreviousRadioCard NextCheckboxCard