Spin Button

A number input with step buttons.

Examples

Basic

Seats

Between 1 and 50.

Decimal step

Values round to the step's precision.

Opacity

API

Prop	Type	Default
`id` Id for the control; generated with `useId()` when omitted.	`string`	—
`min` Lowest value. Home jumps here.	`number`	`Number.NEGATIVE_INFINITY`
`max` Highest value. End jumps here.	`number`	`Number.POSITIVE_INFINITY`
`step` Arrow-key and button increment; PageUp/PageDown move ten steps. Its decimals set the rounding.	`number`	`1`
`hint` Help text under the control, announced as its description.	`string`	—
`label` Visible label, linked to the control.	`string`	—
`optional` Appends the `optional` translation to the label.	`boolean`	`false`
`disabled` Disables the control.	`boolean`	`false`
`error` `true` marks the control invalid; a string also shows it as the message, replacing the hint.	`string \| boolean`	—
`modelValue` The value. `undefined` while the input is empty.	`number`	—

Event	Payload
`update:modelValue` `v-model:modelValue` update.	`[value: number \| undefined]`

Slot	Props
`decrement` Decrease button icon.	—
`increment` Increase button icon.	—

Styling

Parts: fieldfield-labelfield-optionalspinbuttonspinbutton-decrementspinbutton-inputspinbutton-incrementfield-message
States: data-field-errordata-spinbutton-errordata-spinbutton-disableddata-field-tone

Keyboard

Keys	Action
`↑` / `↓`	Step up / down
`Page Up` / `Page Down`	Ten steps
`Home` / `End`	Minimum / maximum

Accessibility

The buttons repeat while held and are skipped by Tab.
Values are clamped and rounded on blur.