COMPONENTS / ATOMS / al-checkbox← ALL COMPONENTS

Checkbox

<al-checkbox><ALCheckbox> REACTbetaOPEN IN FIGMA ↗

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

PLAYGROUND6 CONTROLS

PREVIEW / al-checkbox / ALTITUDE

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 PARITYALTITUDE DESIGN SYSTEM

FIGMA AHEADAltitude Design SystemFIGMA SET · Checkbox6 PROPERTY DIFFSFROM TRACKED PROJECTION

The Figma set changed since the last confirmed sync — the code is behind.

DECIDED BY: CONTRACT DIFF
FIGMA SIDE: OBSERVED
LAST CONFIRMED SYNC: 2026-08-23
PUBLIC SURFACE: 12 ATTR · 3 SLOT · 1 EVENT · 0 PART

The component’s public surface — attributes and their value sets, slots, events, CSS parts and custom properties, from the manifest — compared against the Figma set’s property definitions.

PROPERTYDISAGREEMENTCODE / CANVAS

theme/border/radius/lg[token-binding] missing-in-canvas--al-theme-border-radius-lg / —

theme/border/radius/round[token-binding] missing-in-canvas--al-theme-border-radius-round / —

theme/border/width/@[token-binding] missing-in-canvas--al-theme-border-width / —

theme/color/background/neutral-strong[token-binding] missing-in-canvas--al-theme-color-background-neutral-strong / —

theme/color/border/neutral-default[token-binding] missing-in-canvas--al-theme-color-border-neutral-default / —

theme/size/control[token-binding] missing-in-canvas--al-theme-size-control / —

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