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.
useCheckboxState
12345678910111213141516171819202122import { 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> ); }
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> ); }