Number Field

SNumberField is a number input with "plus"/"minus" buttons. It is built on Reka UI (the spinbutton role, arrow-key stepping, min/max bounds, formatting) and reuses SFormField (label, hint, error message, a11y), SButton-like step buttons and SIcon. The value is bound with v-model.

Basic usage

Step

States and placeholder

required marks the field as required, error shows an error message and makes the field invalid (explicit invalid does the same), disabled blocks the field and the step buttons, placeholder is visible while the field is empty.

When this is not the right component

SNumberField is a stepper: a border with "minus" and "plus" buttons at the edges, and those buttons cannot be turned off. It does not fit a form field that needs plain input with a unit on the right — use SInput with the numeric prop instead: it has the same precision and bounds constraints, plus suffix, slots and size.

<template>
  <!-- counter: stepping matters more than typing -->
  <SNumberField
    v-model="quantity"
    :min="1"
    :max="99"
    label="Quantity"
  />

  <!-- form field: typing and the unit matter -->
  <SInput
    v-model="weight"
    :numeric="{ decimals: 2, unsigned: true }"
    suffix="kg"
    label="Weight"
  />
</template>

API

Props

Name	Type	Default	Description
id	string	undefined	Control id. Generated automatically (SSR-safe) when not set.
label	string	undefined	Field label.
hint	string	undefined	Hint below the field.
error	string	undefined	Error message. When set, the field is marked invalid.
invalid	boolean	false	Marks the field invalid explicitly (in addition to error).
square	boolean	undefined	Square corners: removes the field border rounding (rounded by default).
required	boolean	false	Marks the field as required.
disabled	boolean	false	Disables the field and the step buttons.
min	number	undefined	Minimum value.
max	number	undefined	Maximum value.
step	number	1	Step for the plus/minus buttons and arrow keys.
placeholder	string	undefined	Placeholder in an empty field.
decrement-label	string	undefined	Accessible name of the decrement button (taken from the locale dictionary by default).
increment-label	string	undefined	Accessible name of the increment button (taken from the locale dictionary by default).
model-value	null | number	null	Numeric value of the field. Two-way binding via v-model.

Events

Name	Signature	Description
update:modelValue	(value: number | null) => void	Emitted when modelValue changes. Used for two-way binding (v-model).