COMPONENTS / ATOMS / al-radio← ALL COMPONENTS

Radio

<al-radio><ALRadio> REACTbetaOPEN IN FIGMA ↗

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

PLAYGROUND5 CONTROLS
PREVIEW / al-radio / ALTITUDE
Loading preview
Radio
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
IN SYNCAltitude Design SystemFIGMA SET · Radio5 PROPERTY DIFFSFROM TRACKED PROJECTION
Code and the Figma component set matched at the last confirmed sync, and neither has changed since.
DECIDED BY
CONTRACT DIFF
FIGMA SIDE
OBSERVED
LAST CONFIRMED SYNC
2026-08-28
PUBLIC SURFACE
11 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/width/@[token-binding] missing-in-canvas--al-theme-border-width / —
theme/border/width/lg[token-binding] missing-in-code— / theme/border/width/lg
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 stateAXEradio--CheckedPASS
Advanced statesAXE8 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 · 9 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 thresholdsradio--Disabled, radio--DisabledChecked, radio--DisabledError3
INSTALL@southleft/al-web-components/components/radio
import '@southleft/al-web-components/components/radio';
import { ALRadio } from '@southleft/al-react';
API — 11 PROPS11 DOCUMENTED
PROPTYPEDEFAULT
isCheckedbooleanChecked attribute—
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 radio to be required for validation—
namestringName attribute—
valuestringValue attribute—
hideLabelbooleanHide label?
- If true, hides the label from displaying—
errorNotestringError message
- An error field note that displays below the radio input—
fieldNotestringField note
- The helper text that displays below the radio 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 radio
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
onRadioChangeFired when this radio becomes checked. Detail: `{ checked, name, value }`.CustomEvent
PUBLIC METHODS3
METHODDESCRIPTION
toggleChecked()Toggle checked 1. Set the checked state 2. Dispatch the custom event
handleOnChange()Handle on change of the radio item - Check the item
handleOnKeydown()Handle on keydown of the radio item - Check the item
SOURCE — components/radio/radio.ts · Atoms/Form/Radio