Checkbox
Checkboxes provide users with a range of options for a given statement where the user may select any number of choices, including zero, one or multiple.
import { Checkbox, CheckboxGroup, CheckboxPrimitive } from '@balance-web/checkbox';Usage
The Checkbox component maps to a checkbox input and a label. The label is
provided as children to the component. If you need custom label behaviour use
the CheckboxPrimitive component.
Controlled
The Checkbox component passes on the original event through the onChange handler. Use the event target's checked property to get the latest value and update state accordingly.
Size
The Checkbox is available in a "small" size. Reserve this appearance for data-rich, dense interfaces.
Groups
Use the CheckboxGroup to implement a group of checkboxes. Each Checkbox within a group must have a "value" prop.
Primitive
Use the CheckboxPrimitive to implement custom behaviours and appearances.
Indeterminate state
The indeterminate state of a checkbox input element is controlled by JavaScript, not HTML attribution. To make things more declarative and less confusing Balance checkboxes accept a "tri-state"; the checked value for a checkbox may be true | false | 'mixed', where "mixed" indicates an indeterminate state aligning with the aria-checked attribute.