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 '@basmilius/react-ui';

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

export default function StepperDemo() {
    const [size, setSize] = useState(14);
    const [spacing, setSpacing] = useState(1.5);

    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 spacing" value={spacing} onValueChange={setSpacing} min={1} max={2} step={0.25} />
        </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.

Props

Prop	Type
value	number	Required.
onValueChange	(value: number) => void	Required.
min	number	Required.
max	number	Required.
step	number	Required.
label	string	Required.
unit	string	Printed right after the number, such as px or %.
className	string
ref	Ref<HTMLDivElement>

StepperProps is an exported type.