Checkbox

Checkboxes allow users to select one or more items from a list of items. There are three states in a Checkbox: Checked, Unchecked and Indeterminate. A Checkbox is in indeterminate state when it is neither checked nor unchecked.

To enhance accessibility, Checkboxes come with a label which is placed beside the component. The labels are of type text and they come in 3 sizes:

• small (s)
• medium (m) — default
• large (l)

The size of the Checkbox remains the same for all label sizes. You can choose to skip the standard label and bind the Checkbox with you own label as well.

Checkboxes support most input type="checkbox" attributes like checked, value,onChange & disabled as well as data-* attributes. To get a handle of the underlying DOM element, use React Refs.

Accessibility

• Checkbox accepts clicks on the checkbox as well as its label to toggle its state.
• Use tab to move keyboard focus to the checkbox.
• When in focus, press space to toggle the state.
• All checkbox accept the aria-* attributes for "checkbox" role.

Accessibility must-haves

• Add aria-label or aria-labelledby for cases where Checkbox does not have a dedicated label. For e.g. a checkbox used to select a table row.

• Use id and htmlFor props to associate your custom label with the Checkbox.

Usage

import { Checkbox } from "@asphalt-react/checkbox"

<Checkbox value="yes" label="Are you a a GoTo employee?" />

Props

label

Label for the Checkbox

| type | required | default | | ------ | -------- | ------- | | string | false | "" |

size

Controls the label size. Size of the Checkbox remains same. Accepts s, m, l for small, medium & large

| type | required | default | | ---- | -------- | ------- | | enum | false | "m" |

indeterminate

Set indeterminate state of Checkbox

| type | required | default | | ---- | -------- | ------- | | bool | false | false |