Reference generated from the custom elements manifest — 5 properties, 0 slots, 1 events.
PLAYGROUND2 CONTROLS
PREVIEW / al-toggle / SOUTHLEFT
Loading preview
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 stateAXEtoggle--CheckedPASS
Advanced statesAXE3 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
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.
NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 4 STORIES.
import '@southleft/al-web-components/components/toggle';
import { ALToggle } from '@southleft/al-react';
API — 5 PROPS5 DOCUMENTED
PROPTYPEDEFAULT
isCheckedbooleanChecked attribute
- If true, sets the treatment to represent an on state
- If false, sets the treatment to represent an off state
Rendered with a PROPERTY binding (`.checked`), not `?checked`, matching
checkbox.ts. The content attribute only seeds the initial state: a user
click sets the input's dirty-checkedness flag, after which the attribute
no longer drives `.checked`. Bound as an attribute, setting `isChecked`
from code updated the host class and left the native input alone, so form
resets and state-driven toggles silently stopped working after one click.—
isDisabledbooleanDisabled attribute
- Changes the component's treatment to represent a disabled state—
fieldIdstringField ID
- Links the label to the toggle
- By default it is autogenerated by nanoid—
labelstringLabel
- The text inside the label tag
- Does not display on the front-end, but is used for A11y'Toggle'
namestringName attribute
- The name attribute used on the toggle—
SLOTS0
THIS COMPONENT DECLARES NO SLOTS IN THE MANIFEST.
EVENTS1
EVENTDESCRIPTIONTYPE
onToggleChangeFired when the toggle's checked state changes. Detail: `{ checked }`.CustomEvent
PUBLIC METHODS2
METHODDESCRIPTION
triggerToggleEvent()Trigger toggle event 1. Toggle the component's checked state 2. Dispatch the custom event
handleKeydown()Handle on keydown events 1. If the Enter key is pressed, trigger the toggle event