Stepper

A number between minus and plus, in one sunken group so the three read as a single control. It suits a value a person nudges, such as a font size, more than one they type.

import { Stepper } from '@adecore/ui';

import { useState } from 'react';
import { Stepper } from '@adecore/ui';

export default function StepperDemo() {
    const [size, setSize] = useState(14);
    const [lineHeight, setLineHeight] = useState(1.5);
    const [speed, setSpeed] = useState(1.25);

    return (
        <div className="flex items-center gap-4">
            <Stepper label="Font size" value={size} onValueChange={setSize} min={10} max={24} step={1} unit="px" />
            <Stepper label="Line height" value={lineHeight} onValueChange={setLineHeight} min={1} max={2.5} step={0.1} unit="×" />
            <Stepper label="Playback speed" value={speed} onValueChange={setSpeed} min={0.25} max={2} step={0.25} unit="×" />
        </div>
    );
}

The value stays between min and max, and each step is rounded to two decimals, so 0.1 plus 0.2 lands on 0.3. A button turns off at its end of the range. Each button's name includes the stepper's label ("Font size: smaller"), and the number is a polite live region, so a screen reader hears the new value.

The number is written the way the region writes one, with as many places as step has: a step of 0.1 shows 1,0× and 1,5× in a Dutch region, never 1×. Pass decimals where the places of the step are not the ones to show. The value keeps the width of the wider end of its range, so stepping never moves the buttons, and the unit sits a shade fainter than the number.

Props

Prop	Type
value	number	Required.
onValueChange	(value: number) => void	Required.
min	number	Required.
max	number	Required.
step	number	Required.
label	string	Required.
decimals	number	Places after the separator, always shown. Defaults to the places of step.
unit	string	Printed right after the number, such as px or %.
className	string
ref	Ref<HTMLDivElement>

StepperProps is an exported type.