Skip to content
STYLESCAPE

Stepper

Examples for the ss-c-stepper module (a number input with − and + buttons) and the number and date fields of ss-c-input. The input works on its own (typing, arrow keys); NumberStepperManager (data-ss="stepper") wires the buttons, fires input/change, and marks a button aria-disabled at min or max.

Stepper

HTML 
<label for="stepper-guests" style="display: block; font-weight: 500; margin-bottom: 6px">Guests</label>
        <div class="ss-c-stepper" data-ss="stepper">
            <button type="button" class="ss-c-stepper__button" data-ss-stepper="down" aria-label="Fewer guests" aria-controls="stepper-guests">−</button>
            <input id="stepper-guests" type="number" class="ss-c-stepper__input" min="1" max="12" value="2">
            <button type="button" class="ss-c-stepper__button" data-ss-stepper="up" aria-label="More guests" aria-controls="stepper-guests">+</button>
        </div>

Sizes and states

HTML 
<div style="display: flex; flex-wrap: wrap; gap: 16px; align-items: center">
            <div class="ss-c-stepper ss-c-stepper--sm">
                <button type="button" class="ss-c-stepper__button" aria-label="Decrease (small)">−</button>
                <input type="number" class="ss-c-stepper__input" aria-label="Small stepper" value="4">
                <button type="button" class="ss-c-stepper__button" aria-label="Increase (small)">+</button>
            </div>
            <div class="ss-c-stepper ss-c-stepper--lg">
                <button type="button" class="ss-c-stepper__button" aria-label="Decrease (large)" aria-disabled="true">−</button>
                <input type="number" class="ss-c-stepper__input" aria-label="Large stepper at its minimum" min="0" value="0">
                <button type="button" class="ss-c-stepper__button" aria-label="Increase (large)">+</button>
            </div>
            <div class="ss-c-stepper">
                <button type="button" class="ss-c-stepper__button" aria-label="Decrease (disabled)" disabled>−</button>
                <input type="number" class="ss-c-stepper__input" aria-label="Disabled stepper" value="8" disabled>
                <button type="button" class="ss-c-stepper__button" aria-label="Increase (disabled)" disabled>+</button>
            </div>
        </div>

Number and date fields

Plain ss-c-input: tabular digits, native pickers that follow the light/dark theme.

HTML 
<div style="display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))">
            <label>Quantity <input type="number" class="ss-c-input" min="0" step="1" value="12"></label>
            <label>Start date <input type="date" class="ss-c-input" value="2026-10-08"></label>
            <label>Time <input type="time" class="ss-c-input" value="09:30"></label>
            <label>Appointment <input type="datetime-local" class="ss-c-input" value="2026-10-08T14:00"></label>
            <label>Month <input type="month" class="ss-c-input" value="2026-10"></label>
            <label>Small date <input type="date" class="ss-c-input ss-c-input--sm"></label>
        </div>