COMPONENTS / ATOMS / al-radio← ALL COMPONENTS

Radio

<al-radio><ALRadio> REACTbeta

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

PLAYGROUND5 CONTROLS

PREVIEW / al-radio / SOUTHLEFT

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 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 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