Ariakit
/

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 CheckboxProvider component.

import { Checkbox, CheckboxProvider, Group, GroupLabel } from "@ariakit/react";
import "./style.css";
export default function Example() {
return (
<Group className="wrapper">
<GroupLabel>Your favorite fruits</GroupLabel>
<label className="label">
<Checkbox value="apple" className="checkbox" /> Apple
</label>
<label className="label">
<Checkbox value="orange" className="checkbox" /> Orange
</label>
<label className="label">
<Checkbox value="mango" className="checkbox" /> Mango
</label>
</Group>
);
}

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue