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.

Open preview in a new tab
Edit withViteNext.js
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


Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on Examples.

Read latest issue

No Spam. Unsubscribe at any time.