Checkbox
import { Checkbox } from '@enmovil/ui-design-system';
A group of checkboxes built from an items list, laid out horizontally or vertically. Each item's checked value sets whether it is ticked, and onChange reports the keys of the ticked items.
Properties
| Property | Type | Required | Default | Allowed values | Description |
|---|---|---|---|---|---|
items | CheckboxItem[] | Yes | — | — | The checkboxes of the group, in order. The group is controlled by the items' checked values, so update them from onChange. |
direction | string | No | 'horizontal' | 'horizontal', 'vertical' | Lays out the checkboxes in a row (horizontal) or a column (vertical). Defaults to horizontal. |
items
An array of objects (CheckboxItem). Each object has these fields:
| Field | Type | Required | Description |
|---|---|---|---|
key | string | Yes | Value of the checkbox, reported in onChange when it is ticked; keys must be unique. |
label | string | Yes | Text shown next to the checkbox. |
checked | boolean | No | Whether the checkbox is ticked. Unticked when absent. |
disabled | boolean | No | Disables this checkbox. When it is not set, the group's disabled applies. |
Other attributes
Checkbox passes 6 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.
Events
| Name | Signature | When it fires |
|---|---|---|
onChange | ((checkedValues: string[]) => void) | Fires when an option is checked or unchecked, with the keys of all checked items. Update items[].checked from it. |
onFocus | FocusEventHandler<HTMLDivElement> | Fires when any checkbox in the group receives focus. |
onBlur | FocusEventHandler<HTMLDivElement> | Fires when a checkbox loses focus, including when focus moves to the next one. |
onMouseEnter | MouseEventHandler<HTMLDivElement> | Fires when the pointer enters the group. |
onMouseLeave | MouseEventHandler<HTMLDivElement> | Fires when the pointer leaves the group. |
Children
Checkbox does not accept children.
Variants
Loading examples…
Playground
Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default Checkboxes example.
Loading playground…
Storybook
Open Checkbox in Storybook to try every story with the full set of controls.