Installation
Nothing to add. This component ships as source in your download, so it is already in your project.
src/vui/stepper.tsx@viliha/vui-react/stepperThe exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.
Usage
import { Stepper } from "@viliha/vui-react/stepper";Exports
Everything this family exports. They are read from the source, so this list is what the package actually ships.
| Prop | Type | Default |
|---|---|---|
| Stepper | component | — |
Stepper props
| Prop | Type | Default | What it does |
|---|---|---|---|
| id? | string | — | |
| value | number | — | |
| onChange | (next: number) => void | — | |
| min? | number | — | |
| max? | number | — | |
| label | string | — | Names the field for a screen reader, and both buttons by extension. Required: the control is three elements and a visible `<label>` names only the input. |
| step? | number | — | How much one press moves it. A quantity steps by one; a price might not. |
| disabled? | boolean | — | |
| className? | string | — |
Customize
Every value this component draws comes from the theme: the colours, the radius, the control height and the type scale. Change a token and this moves with everything else, which is the difference between theming the product and overriding a component. See Theming for the token contract, and Swapping defaults for replacing the markup itself.