Products · Components
Stepper
Changes a number by steps with − and +, such as how many tickets.
For a wide range, use a Slider.
Children: Nothing
Example
<Stepper label="Quantity" value="{{ quantity }}" min="1" max="10" onChange="setQuantity" />export default definePage({
initialState: { quantity: 2 },
mutations: {
setQuantity: (_state, event: ValueEvent<number>) => ({ quantity: event.detail.value }),
},
});Props
| Prop | Type | What it is |
|---|---|---|
value | number | |
min | number | |
max | number | |
step | number | Default: 1. |
label | string | |
hint | string | Help shown under the field, which error replaces. |
disabled | boolean | Dims it, and the person can't use it. |
Events
| Event | Sends | Notes |
|---|---|---|
onChange | { value } in detail | The new value, as a number. |