Component

Vue Number Input Component

<DomNumberInput>

An accessible Vue 3 number input with v-model, labels, validation, and native min, max, and step constraints.

Use DomNumberInput when a Vue form needs a real numeric value with native browser spinbutton behavior. It works with Vue 3 v-model, emits numbers while the user types, and shares DOM Studio's accessible label, description, disabled, required, and error UI.

Quick start

Prompt your AI to add it

Paste this into your coding agent. It contains the package, imports, model, and constraints needed for a working Vue number input.

text

Add DOM Studio's Vue 3 number input to this project.

1. Install @getdom/studio.
2. Import DomNumberInput from '@getdom/studio/vue'.
3. Import '@getdom/studio/style.css' once in the app entry file if it is not already imported.
4. Add a ref named quantity and bind it with v-model.
5. Render a labelled Quantity field with min 1, max 99, and step 1.

Use the project's existing package manager and Vue conventions. Do not replace unrelated form code.

Quick start

Or add it manually in three steps

1. Install

Add the DOM Studio package to your Vue 3 project.

2. Load styles once

Import the complete stylesheet in your app entry file.

3. Import and bind

Import the component in any SFC and use ordinary v-model.

shell

npm install @getdom/studio

import '@getdom/studio/style.css';

Copy the smallest useful implementation

A ref, one import, v-model, and native numeric boundaries are enough.

QuantityInput.vuevue

Install

npm install @getdom/studio

vue

<script setup>
import '@getdom/studio/style.css';
import { ref } from 'vue';
import { DomNumberInput } from '@getdom/studio';

const quantity = ref(1);
</script>

<template>
	<div class="w-full max-w-sm">
		<DomNumberInput
			v-model="quantity"
			label="Quantity"
			description="Choose between 1 and 12 items."
			:min="1"
			:max="12"
		/>
		<p class="mt-3 text-sm text-muted-fg">Selected quantity: {{ quantity || 0 }}</p>
	</div>
</template>

Quantity

Choose between 1 and 12 items.

Selected quantity: 1

Examples

Decimal steps and validation

Use step for fractional values. Native min and max constraints guide browser controls; pass your application errors through errors when you need an inline validation message.

A bounded percentage and a decimal number input with quarter-hour increments.

Completion percentage

Whole numbers from 0 to 100.

Estimated hours

Adjust in quarter-hour steps.

DecimalAndPercentage.vuevue

Install

npm install @getdom/studio

vue

<script setup>
import '@getdom/studio/style.css';
import { computed, ref } from 'vue';
import { DomNumberInput } from '@getdom/studio';

const completion = ref(75);
const hours = ref(1.5);
const completionErrors = computed(() => (
	completion.value === '' || completion.value < 0 || completion.value > 100
		? ['Enter a percentage from 0 to 100.']
		: []
));
</script>

<template>
	<div class="grid w-full max-w-xl gap-4 sm:grid-cols-2">
		<DomNumberInput
			v-model="completion"
			label="Completion percentage"
			description="Whole numbers from 0 to 100."
			:min="0"
			:max="100"
			:errors="completionErrors"
		/>
		<DomNumberInput
			v-model="hours"
			label="Estimated hours"
			description="Adjust in quarter-hour steps."
			:min="0"
			:step="0.25"
		/>
	</div>
</template>

Behavior

What value does v-model receive?

While filled

v-model receives a JavaScript number, so calculations do not need a separate string conversion.

When cleared

The value is an empty string. Treat that as missing input and validate it before saving.

Playground

Try the Vue number input

Number input playground

Change the label, description, value, min, max, step, disabled state, and validation props live.

Quantity

Choose between 1 and 99 items.

Properties

Control props

Value

Current numeric value.

Min

Minimum accepted number and native spinbutton boundary.

Max

Maximum accepted number and native spinbutton boundary.

Step

Increment used by the browser spin buttons and arrow keys.

Field props

Optional ID override. By default parent forms derive the input ID from the field path using underscores.

Name

Local field name. Parent forms derive the full field path and native HTML name from the form hierarchy.

Label

Visible field label.

Description

Optional helper copy below the field.

Placeholder

Placeholder shown when the control is empty.

RequiredMark the field as required.

DisabledDisable field interaction.

Read OnlyShow the value but prevent editing.

InvalidMark the field invalid.

Errors

Validation errors for this field.

VisibleShow or hide the field.

Validators

No validators yet.

Validators attached to this field. Use functions in Vue code, or serializable records such as { name: "minLength", props: { min: 2 } } in generated schemas.

Validate On BlurRun validators when the field loses focus.

Chrome

Render default field chrome, or hide chrome while keeping form state wiring.

Playground.vuevue

Install

npm install @getdom/studio

vue

<script setup>
import '@getdom/studio/style.css';
import { reactive } from 'vue';
import { DomNumberInput } from '@getdom/studio';

const data = reactive({
		"modelValue": 3,
		"id": "",
		"name": "",
		"label": "Quantity",
		"description": "Choose between 1 and 99 items.",
		"placeholder": "",
		"required": false,
		"disabled": false,
		"readOnly": false,
		"invalid": false,
		"errors": [],
		"visible": true,
		"validators": [],
		"validateOnBlur": true,
		"chrome": "field",
		"min": 1,
		"max": 99,
		"step": 1
	});
</script>

<template>
	<DomNumberInput
		v-bind="data"
		@update:modelValue="data.modelValue = $event"
	/>
</template>

Vue number input API

Props

Control props

Name	Type	TS	Default	Description
`modelValue`	number \| string	string	''	Current numeric value.
`min`	number	number	—	Minimum accepted number and native spinbutton boundary.
`max`	number	number	—	Maximum accepted number and native spinbutton boundary.
`step`	number	number	1	Increment used by the browser spin buttons and arrow keys.

Field props

Name	Type	TS	Default	Description
`id`	string	string	''	Optional ID override. By default parent forms derive the input ID from the field path using underscores.
`name`	string	string	''	Local field name. Parent forms derive the full field path and native HTML name from the form hierarchy.
`label`	string	string	''	Visible field label.
`description`	string	string	''	Optional helper copy below the field.
`placeholder`	string	string	''	Placeholder shown when the control is empty.
`required`	boolean	boolean	false	Mark the field as required.
`disabled`	boolean	boolean	false	Disable field interaction.
`readOnly`	boolean	boolean	false	Show the value but prevent editing.
`invalid`	boolean	boolean	false	Mark the field invalid.
`errors` ts `[ { name: "Validation name", message: "Error message", } ]`	array \| object \| string	Array<ErrorsItem `type ErrorsItem = { name?: string; // Name message?: string; // Message };` >	[]	Validation errors for this field.
`visible`	boolean	boolean	true	Show or hide the field.
`validators`	array	Array<unknown>	[]	Validators attached to this field. Use functions in Vue code, or serializable records such as { name: "minLength", props: { min: 2 } } in generated schemas.
`validateOnBlur`	boolean	boolean	true	Run validators when the field loses focus.
`chrome`	'field' \| 'none' \| false	string	'field'	Render default field chrome, or hide chrome while keeping form state wiring.

Auto-generated from Vue number input.props and inline _edit hints.

Events

Name	Payload	Description
@update:modelValue	number \| string	Fired with a number as the user types, or an empty string when cleared.
@focus	FocusEvent	Fired when the number input receives focus.
@blur	FocusEvent	Fired when the number input loses focus.

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.