Checkbox as button

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

1
2
3
4
5
6
7
8
9
10
11
12
import { Checkbox, useCheckboxState } from "ariakit/checkbox";
import "./style.css";

export default function Example() {
  const checkbox = useCheckboxState();
  return (
    <Checkbox as="button" state={checkbox} className="button">
      {checkbox.value ? "Checked" : "Unchecked"}
    </Checkbox>
  );
}

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%);
}

Learn more in Styling.