Ariakit
/

CheckboxProvider

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

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

Optional Props


defaultValue

ToPrimitive<T> | undefined = false

The default value state of the checkbox.

Live examples


setValue

((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

Store<Partial<S>> | undefined

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

Live examples


value

ToPrimitive<T>

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