Checkboxes are used to provide users with multiple options for selection in a series of options.
When used as a toggle they allow the user to make a binary choice usually (but not limited) in the form of a yes/no or on/off suggestion. Toggles are often used in product settings or as filter options. When engaged (on), Base UI toggles are colored and when disengaged (off) they’re grey.
- When a collection of options share context.
- When a user wants to toggle an option on/off.
- When a user wants to select multiple options.
Additionally, you can fully customize any part of the Checkbox through the overrides prop. The Checkbox consists of multiple sub-components that are listed bellow and you can override each one of them. To help you identify the names of these sub-components, you can highlight them through this selector: