Checkbox Input @astryx-svelte/core v0.3.0 · CheckboxInput
Usage
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
Best practices
| 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. |
| Don't | Wrap a disabled checkbox in Tooltip to explain why it is disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead. |
Examples
Common configurations, variations, and states.CheckboxInput — States
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.
CheckboxInput — Indeterminate
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.
CheckboxInput — Status
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.