Checkbox

Checkbox is a user interface control that enables users to toggle between checked, unchecked, and indeterminate states

Anatomy

Import and assemble the component:

1import { Checkbox } from "@raystack/apsara";
2

3<Checkbox />

Use Checkbox.Group to manage shared state across multiple checkboxes:

1<Checkbox.Group defaultValue={["apple"]}>
2  <Checkbox name="apple" />
3  <Checkbox name="banana" />
4  <Checkbox name="cherry" />
5</Checkbox.Group>

API Reference

Root

Renders a toggleable checkbox input.

Prop

Type

Group

Groups multiple checkboxes and manages their shared checked state via a string[] value.

Prop

Type

Examples

States

The Checkbox component supports multiple states to represent different selection conditions:

  • Unchecked: Default state
  • Checked: Selected state
  • Indeterminate: Partial selection state
  • Disabled: Disabled state
1<Checkbox />

Group

Use Checkbox.Group to coordinate multiple checkboxes with shared state.

1<Checkbox.Group defaultValue={["banana"]}>
2  <Flex direction="column" gap="small">
3    <Flex gap="small" align="center">
4      <Checkbox name="apple" id="cg-apple" />
5      <label htmlFor="cg-apple">Apple</label>
6    </Flex>
7    <Flex gap="small" align="center">
8      <Checkbox name="banana" id="cg-banana" />
9      <label htmlFor="cg-banana">Banana</label>
10    </Flex>
11    <Flex gap="small" align="center">
12      <Checkbox name="cherry" id="cg-cherry" />
13      <label htmlFor="cg-cherry">Cherry</label>
14    </Flex>
15  </Flex>

Disabled Group

Disable the entire group to prevent user interaction.

1<Checkbox.Group defaultValue={["apple"]} disabled>
2  <Flex direction="column" gap="small">
3    <Flex gap="small" align="center">
4      <Checkbox name="apple" id="cd-apple" />
5      <label htmlFor="cd-apple">Apple</label>
6    </Flex>
7    <Flex gap="small" align="center">
8      <Checkbox name="banana" id="cd-banana" />
9      <label htmlFor="cd-banana">Banana</label>
10    </Flex>
11  </Flex>
12</Checkbox.Group>

Parent Checkbox

Use a parent checkbox with allValues to toggle all items at once.

1(function ParentExample() {
2  const [value, setValue] = React.useState([]);
3  const allValues = ["apple", "banana", "cherry"];
4  return (
5    <Checkbox.Group
6      value={value}
7      onValueChange={setValue}
8      allValues={allValues}
9    >
10      <Flex direction="column" gap="small">
11        <Flex gap="small" align="center">
12          <Checkbox parent id="cp-all" />
13          <label htmlFor="cp-all">
14            <strong>Select All</strong>
15          </label>

Accessibility

  • Follows the WAI-ARIA Checkbox pattern
  • Supports keyboard activation with Space key
  • Uses aria-checked to indicate state (checked, unchecked, indeterminate)
  • Associates with labels via id and htmlFor attributes
  • Wrap Checkbox.Group with aria-label or aria-labelledby for an accessible group name