All things Checkbox
Components
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 to conveniently manage a checkbox value,
whether it's a string, number, boolean, or an array of strings or numbers.
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 checkmark icon when the
checked prop is
true. The icon can be overridden by providing a different one as children.
CheckboxProviderProvides 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.