NumberInput

A number input field with optional slider, percent mode, and validation.

Examples

Basic

Days

<script setup>
import { ref } from "vue";
const days = ref(10);
</script>

<NumberInput v-model="days" label="Days" placeholder="Number of days" />

With hint and validation

Population

<NumberInput
  v-model="population"
  label="Population"
  hint="Total number of individuals"
  :min="1000"
  :max="100000"
  :step="1"
/>

Percent mode

Vaccination coverage %

<NumberInput v-model="coverage" label="Vaccination coverage" percent :max="1" />

Slider

R0

3.5

1.018.0

<NumberInput
  v-model="r0"
  label="R0"
  hint="Basic reproduction number"
  :step="0.1"
  :min="1"
  :max="18"
  slider
/>

Live slider

With live, the model updates while dragging the slider thumb rather than only on release.

Vaccination coverage

50%

0%100%

<NumberInput
  v-model="coverage"
  label="Vaccination coverage"
  percent
  slider
  live
  :max="1"
/>

Live input

With live on a regular input, the model updates as you type (debounced 300ms). Arrow keys and spinner buttons commit immediately.

Days

<NumberInput v-model="days" label="Days" live />

Integer type

With number-type="integer", decimal values are truncated to whole numbers on commit. When combined with percent, the display value (e.g. 42%) is treated as the integer — so internal values like 0.42 are valid.

Steps

<NumberInput v-model="days" label="Steps" number-type="integer" />

Decimal places

Display precision is inferred from step (e.g. step="0.001" in percent mode shows tenths of a percent). Set decimals explicitly to override.

Coverage (inferred from step) %R0 (explicit decimals)

<NumberInput
  v-model="coverage"
  label="Coverage"
  percent
  :step="0.001"
  :max="1"
/>
<NumberInput v-model="r0" label="R0" :decimals="3" :min="0" :max="18" />

Required

With required, clearing the field shows a validation error on commit.

Days

<NumberInput v-model="days" label="Days" required />

Combine required with live to validate as the user types (debounced).

Days (on blur) Days (live)

<NumberInput v-model="days" label="Days (on blur)" required />
<NumberInput v-model="days" label="Days (live)" required live />

Hidden label

Use hide-label to visually hide the label while keeping it available to screen readers. Useful when a heading or surrounding context already describes the input visually.

Days

<NumberInput v-model="days" label="Days" hide-label />

Model

Name	Type
v-model	number

Props

Prop	Type	Required	Default
label	string	No	—
hideLabel	boolean	No	—
placeholder	string	No	—
step	number	No	—
min	number	No	—
max	number	No	—
hint	string	No	—
percent	boolean	No	—
slider	boolean	No	—
live	boolean	No	—
numberType	"integer" | "float"	No	—
required	boolean	No	—
decimals	number	No	—