COMPONENTS / MOLECULES / al-input-stepper← ALL COMPONENTS

Input Stepper

<al-input-stepper><ALInputStepper> REACTbeta

Reference generated from the custom elements manifest — 18 properties, 2 slots, 1 events.

PLAYGROUND6 CONTROLS

PREVIEW / al-input-stepper / SOUTHLEFT

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 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 stateAXEinput-stepper--DefaultPASS

Advanced statesAXE6 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 · 7 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 thresholdsinput-stepper--Disabled1

INSTALL@southleft/al-web-components/components/input-stepper

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

SOURCE — components/input-stepper/input-stepper.ts · Molecules/Form/Input Stepper