COMPONENTS / ATOMS / al-checkbox← ALL COMPONENTS

Checkbox

<al-checkbox><ALCheckbox> REACTbeta

Reference generated from the custom elements manifest — 12 properties, 3 slots, 1 events.

PLAYGROUND6 CONTROLS
PREVIEW / al-checkbox / SOUTHLEFT
Loading preview
Checkbox
FLAGS
CODE — HTML / REACT
Guidance
NOT YET AUTHORED · 20 COMPONENTS COVERED
NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.
FIGMA PARITYNOT TRACKED
NO DESIGN-SYSTEM PROJECT TRACKS THIS COMPONENT AGAINST A FIGMA FILE — IT IS EITHER OUTSIDE EVERY PROJECT’S DECLARED SCOPE, OR NOT YET SEEDED INTO ITS PROJECT’S PARITY MANIFEST.
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEcheckbox--CheckedPASS
Advanced statesAXE10 further storiesPASS
Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED
Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED
MEASURED 2026-09-08 · 11 STORIES · AXE WCAG2A + WCAG2AA + WCAG21A + WCAG21AA + WCAG22AA
COLOR CONTRAST1 RULE FAILING
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
RULEWHEREELEMENTS
color-contrastElements must meet minimum color contrast ratio thresholdscheckbox--Disabled, checkbox--DisabledChecked, checkbox--DisabledError, checkbox--DisabledIndeterminate4
INSTALL@southleft/al-web-components/components/checkbox
import '@southleft/al-web-components/components/checkbox';
import { ALCheckbox } from '@southleft/al-react';
API — 12 PROPS12 DOCUMENTED
PROPTYPEDEFAULT
isCheckedbooleanChecked attribute
- Changes the component's treatment to represent an checked state—
isIndeterminatebooleanIndeterminate state
- Changes the component's treatment to represent an indeterminate state

Rendered as BOTH `.indeterminate` and `aria-checked="mixed"`. It used to be
neither — only an `al-is-indeterminate` class — so a tri-state "select all"
looked mixed and announced as plain unchecked. `.indeterminate` has no
content attribute at all (there is no `?indeterminate` that could work) and
is what paints the native glyph; `aria-checked` is what a screen reader
reads. Left undefined when not indeterminate, so the input's own checked
state is announced rather than shadowed by a stale value.—
isErrorbooleanError state
- Changes the component's treatment to represent an error state—
isDisabledbooleanDisabled attribute
- Changes the component's treatment to represent a disabled state—
isRequiredbooleanRequired attribute
- Sets the checkbox to be required for validation—
hideLabelbooleanHide label?
- If true, hides the label from displaying—
namestringName attribute—
valuestringValue attribute—
errorNotestringError message
- An error field note that displays below the checkbox input—
fieldNotestringField note
- The helper text that displays below the checkbox input—
fieldIdstringId attribute
- The ID used for A11y and to associate the label with the input—
ariaDescribedBystringaria-describedby attribute
- Applied to the field note or error note for A11y—
SLOTS3
SLOTDESCRIPTION
(default)The component content that appears next to the checkbox
field-noteIf content is slotted, it will display in place of the fieldNote property
errorIf content is slotted, it will display in place of the errorNote property
EVENTS1
EVENTDESCRIPTIONTYPE
onCheckboxChangeFired when the checked state changes. Detail: `{ checked, indeterminate, value }`.CustomEvent
PUBLIC METHODS2
METHODDESCRIPTION
handleOnChange()Handle on change events 1. Toggle the checked state 2. If isIndeterminate is true, then on change set it to false 3. Dispatch the custom event
handleOnKeydown()Handle on keydown events 1. If the Enter key is pressed, then check the checkbox and dispatch the custom event
SOURCE — components/checkbox/checkbox.ts · Atoms/Form/Checkbox