Number Field

Compose a numeric input from primitives: NumberField + NumberFieldContent + Increment/Decrement buttons + NumberFieldInput. Use when you need a different layout than the bundled InputNumber.

Default

Inline +/- with the input in the middle.

Usage

Import the parts you need from the component's folder.

import {
  NumberField,
  NumberFieldContent,
  NumberFieldDecrement,
  NumberFieldIncrement,
  NumberFieldInput,
} from "@/components/ui/number-field";

With bounds

Constrain the value with min, max, and step.

Disabled

Pass disabled to block the input and step buttons.

API Reference

NumberField

Prop	Type	Default	Description
`modelValue`	`number`	—	Current value. Supports v-model.
`min`	`number`	—	Minimum value.
`max`	`number`	—	Maximum value.
`step`	`number`	`1`	Increment / decrement step.
`disabled`	`boolean`	`false`	Disable the field.

Event	Description
`update:modelValue`	Fires with the new number. Enables v-model.

NumberFieldInput

Prop	Type	Default	Description
`class`	`string`	—	The editable number input. Forwards to reka-ui NumberFieldInput.

NumberFieldIncrement / NumberFieldDecrement

Prop	Type	Default	Description
`class`	`string`	—	Step buttons. Default slot overrides the +/- icon. Forwards to reka-ui.

NumberFieldContent

Prop	Type	Default	Description
`class`	`string`	—	Row wrapper that groups the input with the step buttons.

Native Select Price Range