Checkbox

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

The Checkbox follows theWAI-ARIA - Checkbox Pattern for accessibility.

If not using CheckboxGroup, use Fieldset to group checkboxes.

const [values, setValues] = useState([false, false])

const allChecked = values.every(Boolean)
const isIndeterminate = values.some(Boolean) && !allChecked

return (
  <Fieldset legend="キャラクター">
    <VStack gap="sm">
      <Checkbox
        isChecked={allChecked}
        isIndeterminate={isIndeterminate}
        onChange={(e) => setValues([e.target.checked, e.target.checked])}
      >
        地球人
      </Checkbox>

      <VStack pl="md" gap="sm">
        <Checkbox
          isChecked={values[0]}
          onChange={(e) => setValues([e.target.checked, values[1]])}
        >
          孫悟空
        </Checkbox>

        <Checkbox
          isChecked={values[1]}
          onChange={(e) => setValues([values[0], e.target.checked])}
        >
          孫悟飯
        </Checkbox>
      </VStack>
    </VStack>
  </Fieldset>
)

Copied!

If not using FormControl, set aria-labelledby on the CheckboxGroup.

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

  <CheckboxGroup aria-labelledby="group">
    <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

PreviousRadio NextSwitch