Provides a checkbox store for its descendants. This comes in handy when creating a group of checkboxes that share the same state. CheckboxProvider can efficiently manage the value of a checkbox, whether it's a single string, number, or boolean value, or an array of such values.

Code examples

<Checkbox value="apple" /> Apple
<Checkbox value="orange" /> Orange
<Checkbox value="mango" /> Mango

Optional Props


ToPrimitive<T> | undefined = false

The default value state of the checkbox.

Live examples


((value: ToPrimitive<T>) => void) | undefined

A callback that gets called when the value state changes.

Code examples

function MyCheckbox({ value, onChange }) {
const checkbox = useCheckboxStore({ value, setValue: onChange });


Store<Partial<S>> | undefined

Another store object that will be kept in sync with the original store.

Live examples



The checked state of the checkbox.

Live examples

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue