Ariakit
/

All things 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.

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.

API Reference

useCheckboxContextReturns the checkbox store from the nearest checkbox container.
useCheckboxStoreCreates a checkbox store.
CheckboxRenders an accessible checkbox element. If the underlying element is not a native checkbox, this component will pass additional attributes to make sure it's accessible.
CheckboxCheckRenders a check mark icon, usually inside a Checkbox component.
CheckboxProviderProvides a checkbox store to its descendants. This is useful to create a group of checkboxes that share the same store.