Custom Checkbox

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

Checkbox VisuallyHidden Form controls

Ariakit

Edit withVite Next.js

1234567
import { Checkbox } from "./checkbox.jsx";
import "./style.css";

export default function Example() {
  return <Checkbox defaultChecked>Ariakit</Checkbox>;
}

import { Checkbox } from "./checkbox.jsx";
import "./style.css";

export default function Example() {
  return <Checkbox defaultChecked>Ariakit</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.

VisuallyHiddenHide an element visually but keep it available for screen readers and other assistive technologies.

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.

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

Follow updates

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

Read latest issue