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

Stay tuned

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

No spam. Unsubscribe anytime. Read latest issue