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>
</label>
<label>
</label>
<label>
</label>
Optional Props
defaultValue
ToPrimitive<T> | undefined = false
The default
value
state of
the checkbox.
Live examples


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.
setValue
((value: ToPrimitive<T>) => void) | undefined
A callback that gets called when the
value
state
changes.
Code examples
function MyCheckbox({ value, 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.