This site is under construction Subscribe to updates

Checkbox group

Rendering multiple Checkbox elements in React to form a group of checkboxes. The selected values are stored in an array provided by the useCheckboxState hook.

Apple Orange Mango

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Checkbox, useCheckboxState } from "ariakit/checkbox";
import { Group, GroupLabel } from "ariakit/group";
import "./style.css";

export default function Example() {
  const checkbox = useCheckboxState({ defaultValue: [] });
  return (
    <Group className="wrapper">
      <GroupLabel>Your favorite fruits</GroupLabel>
      <label className="label">
        <Checkbox state={checkbox} value="apple" className="checkbox" /> Apple
      </label>
      <label className="label">
        <Checkbox state={checkbox} value="orange" className="checkbox" /> Orange
      </label>
      <label className="label">
        <Checkbox state={checkbox} value="mango" className="checkbox" /> Mango
      </label>
    </Group>
  );
}