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.

Checkbox Group Form controls

Apple Orange Mango

Edit withVite Next.js

12345678910111213141516171819202122
import "./style.css";
import { Checkbox, CheckboxProvider, Group, GroupLabel } from "@ariakit/react";

export default function Example() {
  return (
    <CheckboxProvider defaultValue={[]}>
      <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>
    </CheckboxProvider>
  );
}

import "./style.css";
import { Checkbox, CheckboxProvider, Group, GroupLabel } from "@ariakit/react";

export default function Example() {
  return (
    <CheckboxProvider defaultValue={[]}>
      <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>
    </CheckboxProvider>
  );
}

Components

CheckboxSelect one or more options in a list or toggle a single option using a native or custom checkbox in React. This component is based on the WAI-ARIA Checkbox Pattern.

View all components

Related examples

Checkbox as buttonRendering a custom Checkbox as a button element in React, while keeping it accessible to screen reader and keyboard users.

Custom CheckboxRendering a visually hidden Checkbox using the VisuallyHidden component to show a custom checkbox presentation in React.

MenuItemCheckboxRendering a dropdown Menu using the MenuItemCheckbox component with the values and setValues props from MenuProvider to control the checked items.

View all examples

Follow updates

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

Read latest issue