Ariakit
/

useCheckboxStore

Creates a checkbox store to conveniently manage a checkbox value, whether it's a string, number, boolean, or an array of strings or numbers.

Code examples

const checkbox = useCheckboxStore({ defaultValue: true });
<Checkbox store={checkbox} />

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

Return Props


setValue

SetState<ToPrimitive<T>>

Sets the value state.

Code examples

store.setValue(true);
store.setValue((value) => !value);

getState

() => S

Returns the current store state.


setState

<K extends keyof S>(key: K, value: SetStateAction<S[K]>) => void

Sets a state value.


useState

UseState<StoreState<T>>

Re-renders the component when the state changes and returns the current state.

Stay tuned

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

No spam. Unsubscribe anytime. Read latest issue