Reference generated from the custom elements manifest — 18 properties, 2 slots, 1 events.
PLAYGROUND6 CONTROLS
PREVIEW / al-input-stepper / ALTITUDE
Loading preview
variant
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
BOTH CHANGEDAltitude Design SystemFIGMA SET · Input Stepper5 PROPERTY DIFFSFROM TRACKED PROJECTION
Code and Figma each changed since the last confirmed sync. Neither side should be overwritten blindly.
DECIDED BY
CONTRACT DIFF
FIGMA SIDE
OBSERVED
LAST CONFIRMED SYNC
2026-08-28
PUBLIC SURFACE
18 ATTR · 2 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.
RULEWHEREELEMENTS
color-contrastElements must meet minimum color contrast ratio thresholdsinput-stepper--Disabled1
import '@southleft/al-web-components/components/input-stepper';
import { ALInputStepper } from '@southleft/al-react';
API — 18 PROPS18 DOCUMENTED
PROPTYPEDEFAULT
fieldIdstringThe unique id of the field—
labelstringThe form field's label'Label'
hideLabelbooleanHide label?—
namestringCheckbox name attribute property—
valuenumberValue—
fieldNotestringFieldnote text—
errorNotestringErrornote text—
minnumberAdd button icon name—
maxnumberAdd button icon name—
ariaDescribedBystringAria describedby
1) Used to connect the field note in select to the select menu for accessibility—
isRequiredbooleanRequired attributefalse
isDisabledbooleanDisabled attribute—
isReadonlybooleanReadonly attribute—
placeholderstringPlaceholder text—
isErrorbooleanError state—
countnumberCount state0
stepnumberInremental/Decremental range1
variant'segmented' | 'trailing'Variant
- `segmented` (default): decrement | value | increment, three segments of
one bordered box divided by hairlines.
- `trailing`: the value takes the full width and both steppers stack at the
trailing edge. Denser across, so it fits inside a table row — but it is
TALLER by default (50px vs 40px), because two stacked controls in 40px
would each be 20px and miss the 24x24 minimum in WCAG 2.2 SC 2.5.8. See
input-stepper.scss for the full note and the escape hatch.'segmented'
SLOTS2
SLOTDESCRIPTION
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
onInputStepperChangeFired when the count changes via the increment/decrement controls or direct entry. Detail: `{ value }`.CustomEvent