Astryx Design System

Checkbox Input@astryxdesign/core v0.0.15 · 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
import {CheckboxInput} from '@astryxdesign/core/CheckboxInput'

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.

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.