CheckboxInput toggles a single on/off value. Use it for settings like "Enable notifications", terms acceptance, or opt-in choices. For multiple checkboxes in a group, use CheckboxList instead.
ts
| Guidance | Practices |
|---|---|
| Do | Always provide a visible label so the user knows what they are toggling. Use isLabelHidden only when surrounding context makes it obvious. |
| Do | Add a description for choices that need extra context, like explaining what "Share usage data" actually shares. |
| Do | Use the indeterminate state for "select all" checkboxes when only some items in a group are selected. |
| Don't | Use a checkbox for mutually exclusive choices; use RadioList when only one option can be selected. |
| Don't | Use a checkbox for actions that take effect immediately; use a toggle switch or button instead. |
Checkboxes with labels and descriptions in checked, unchecked, and disabled states. Each checkbox controls a single on/off setting. Add a description to explain what the setting does.
A "select all" checkbox that controls a group of options. When only some options are checked, it shows a dash instead of a checkmark. Clicking it checks or unchecks everything.
Checkboxes with error, warning, and success validation messages. Use the status prop to show feedback after form validation: errors block submission, warnings inform, and success confirms.