Component

Number input

<DomNumberInput>

A labelled number field with native min / max / step support.

Playground

Try every prop live

Number input playground

Edit props in the inspector — min, max, step, and label update live.

Quantity

Items per order.

Properties

Control props

Value

Current numeric value.

Min

Max

Step

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 false to render only the control while keeping form state wiring.

Playground.vuevue

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

const data = reactive({
	  "modelValue": 1,
	  "id": "",
	  "name": "",
	  "label": "Quantity",
	  "description": "Items per order.",
	  "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>

Demo

Live preview

Quantity

Between 1 and 99.

Value: 3

Usage

Vue

<script setup>
import { DomNumberInput } from '@getdom/studio/vue';
import { ref } from 'vue';
const qty = ref(1);
</script>

<template>
  <DomNumberInput
    v-model="qty"
    label="Quantity"
    description="Between 1 and 99."
    :min="1"
    :max="99"
  />
</template>

Props

Name	Type	Default	Description
v-model	number	0	Bound numeric value.
label	string	—	Label above the input.
description	string	—	Hint shown below the input.
min / max / step	number	—	Native numeric constraints.
disabled	boolean	false	Disable the input.