Checkbox as button

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

Checkbox Form controls

Edit example

123456789101112131415
import { Checkbox, useCheckboxStore, useStoreState } from "@ariakit/react";
import "./style.css";

export default function Example() {
  const checkbox = useCheckboxStore();
  const label = useStoreState(checkbox, (state) =>
    state.value ? "Checked" : "Unchecked",
  );
  return (
    <Checkbox store={checkbox} className="button" render={<button />}>
      {label}
    </Checkbox>
  );
}

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

export default function Example() {
  const checkbox = useCheckboxStore();
  const label = useStoreState(checkbox, (state) =>
    state.value ? "Checked" : "Unchecked",
  );
  return (
    <Checkbox store={checkbox} className="button" render={<button />}>
      {label}
    </Checkbox>
  );
}

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

By default, native checkbox elements are activated on Space, but not on Enter. The Ariakit Checkbox component allows you to control this behavior using the clickOnEnter and clickOnSpace props. However, when rendering the Checkbox as any non-native input element, the clickOnEnter prop will be automatically set to true.

Reading the state

In this example, we're reading the value state from the checkbox store to render the button's text. This is done by using the selector form of the useStoreState hook:

const label = useStoreState(checkbox, (state) =>
  state.value ? "Checked" : "Unchecked"
);
const label = useStoreState(checkbox, (state) =>
  state.value ? "Checked" : "Unchecked"
);

Learn more about reading the state on the Component stores guide.

Styling

When rendering the Checkbox component as a non-native input element, the :checked pseudo-class is not supported. To style the checked state, use the aria-checked attribute selector:

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

Learn more on the Styling guide.

Related examples

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.

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

View all examples

Checkbox as button

Components

Activating on `Enter`

Reading the state

Styling

Stay tuned

Checkbox as button

Components

Activating on Enter

Reading the state

Styling

Related examples

Stay tuned

Activating on `Enter`