Reference generated from the custom elements manifest — 5 properties, 0 slots, 1 events.
PLAYGROUND2 CONTROLS
PREVIEW / al-toggle / ALTITUDE
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 PARITYALTITUDE DESIGN SYSTEM
IN SYNCAltitude Design SystemFIGMA SET · Toggle2 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
5 ATTR · 0 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.
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