Checkbox

Select 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⁠.

Checkbox Form controls

Edit example

123456789101112
import { Checkbox } from "@ariakit/react";
import "./style.css";

export default function Example() {
  return (
    <label className="label">
      <Checkbox className="checkbox" /> I have read and agree to the terms and
      conditions
    </label>
  );
}

import { Checkbox } from "@ariakit/react";
import "./style.css";

export default function Example() {
  return (
    <label className="label">
      <Checkbox className="checkbox" /> I have read and agree to the terms and
      conditions
    </label>
  );
}

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.

Checkbox groupRendering multiple Checkbox elements in React to form a group of checkboxes. The selected values are stored in an array provided by the CheckboxProvider component.

View all Checkbox examples

API

useCheckboxStore()
useCheckboxContext()

<CheckboxProvider>
  <Checkbox>
    <CheckboxCheck />
  </Checkbox>
</CheckboxProvider>
useCheckboxStore()
useCheckboxContext()

<CheckboxProvider>
  <Checkbox>
    <CheckboxCheck />
  </Checkbox>
</CheckboxProvider>

Styling

For more information on styling with Ariakit, refer to the Styling guide.

For consistency, the aria-checked attribute is always rendered on Checkbox, even when it's a native checkbox element. This means you can style the checked state using the aria-checked attribute selector:

.checkbox[aria-checked="true"] {
  background-color: hsl(204 100% 40%);
  color: hsl(204 20% 100%);
}
.checkbox[aria-checked="true"] {
  background-color: hsl(204 100% 40%);
  color: hsl(204 20% 100%);
}

Styling the disabled state

When the accessibleWhenDisabled prop is true, the checkbox element won't have the disabled attribute. This is so users can still focus on the checkbox while it's disabled. Because of this, you should use aria-disabled to style the disabled state:

.checkbox[aria-disabled="true"] {
  opacity: 0.5;
}
.checkbox[aria-disabled="true"] {
  opacity: 0.5;
}

Related components

ButtonTrigger an action or event, such as submitting a Form, opening a Dialog, canceling an action, or performing a delete operation in React. This component is based on the WAI-ARIA Button Pattern.

FormSubmit information with accessible interactive controls in React. Take advantage of the browser's built-in validation with screen reader support. This component is based on the WAI-ARIA Form Role.

MenuAccess a set of commands within a dropdown menu. This component is based on the WAI-ARIA Menu Pattern and the WAI-ARIA Menu Button Pattern.

RadioChoose one option from a list of choices presented as radio buttons. This component is based on the WAI-ARIA Radio Group Pattern.

SelectSelect a value from a list of options presented in a dropdown menu, similar to the native HTML select element. This component is based on the WAI-ARIA Combobox Pattern.

CommandClick with a mouse or keyboard to trigger an action. This abstract component is based on the WAI-ARIA Command Role.

View all components

Checkbox

Examples

API

Styling

Styling the checked state

Styling the disabled state

Stay tuned