Number Field

bo-number-field combines a native number input with increment and decrement buttons. Its model is number | undefined; empty input produces undefined. Alphabetic characters, including exponent notation, are rejected by default; set allow-exponent when scientific notation is required.

Basic Usage

Quantity

Choose between 1 and 10.

Value: 2

<bo-number-field v-model="quantity" label="Quantity" :min="1" :max="10" hint="Choose between 1 and 10." />

Form States

min, max, and step constrain the stepper buttons. description, error, and hint share one helper-text region, with error taking precedence.

Seats

Changes in increments of two.

Read-only value

Invalid value

Enter a valid quantity.

<div class="grid gap-4"><bo-number-field label="Seats" :min="1" :step="2" description="Changes in increments of two." /><bo-number-field label="Read-only value" :model-value="8" read-only /><bo-number-field label="Invalid value" error="Enter a valid quantity." /></div>

API Reference

Prop	Type	Default	Description
modelValue	number | undefined	undefined	Value used by v-model.
min / max	string	-	Native numeric bounds.
step	string	-	Stepper increment; non-positive values use 1.
allowExponent	boolean	false	Allows exponent notation such as 1e3.
placeholder	string	-	Input placeholder.
inputMode	InputHTMLAttributes['inputmode']	decimal	Keyboard hint.
label	string	-	Visible label.
description / error / hint	string	-	Helper text; error wins.
required	boolean	false	Native required state.
disabled	boolean	false	Disables input and buttons.
readOnly	boolean	false	Prevents editing and stepping.
name	string	-	Native form name.
autofocus	boolean	false	Focuses on mount.
role	HTMLAttributes['role']	spinbutton	Input role.
ariaLabel / ariaLabelledBy / ariaDescribedBy	string	-	Accessible naming and description.

The component emits update:modelValue, focus, blur, and change. It exposes focus().