number-field

Number Field

Lets the shopper type a number or step it up and down with buttons at either end, within a minimum and maximum, such as a quantity. Fills its Field like other controls; never narrower than its two buttons and three digits.

States: Default, Focus, Disabled, Invalid

Parts

Part	File	Does
NumberField	NumberField.vue	Groups all parts of the number field.
NumberFieldContent	NumberFieldContent.vue	Groups the number input with its decrement and increment buttons.
NumberFieldDecrement	NumberFieldDecrement.vue	Lowers the value of the number field by one step.
NumberFieldIncrement	NumberFieldIncrement.vue	Raises the value of the number field by one step.
NumberFieldInput	NumberFieldInput.vue	Lets the user type a number into the number field.

Anatomy

<NumberField>
  <NumberFieldContent>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldContent>
</NumberField>

Styling

Part	Recipe
NumberField	number-field
NumberFieldContent	number-field-content
NumberFieldDecrement	number-field-step
NumberFieldIncrement	number-field-step
NumberFieldInput	number-field-input

Install

Writes 6 files into components/ui/number-field/. For agents, npx @frontic/ui docs number-field prints this reference as markdown; the MCP server serves the same.

Installs with it: use-field-control
npm packages: @lucide/vue; @vueuse/core; reka-ui

API reference

NumberField NumberField.vue

Groups all parts of the number field. Renders a <div>.

Prop	Type	Default
defaultValue	number	—

modelValue	number \| null	—

min	number	—

max	number	—

step	number	1

stepSnapping	boolean	true

allowInvalid	boolean	false

focusOnChange	boolean	true

formatOptions	Intl.NumberFormatOptions	—

locale	string	—

disabled	boolean	false

readonly	boolean	false

disableWheelChange	boolean	false

invertWheelChange	boolean	false

id	string	—

startingValue	number	—

asChild	boolean	false

as	AsTag \| Component	'div'
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default 'div'
name	string	—

required	boolean	false

class	ClassValue	—

Event	Payload
update:modelValue	val: number \| undefined

Slot	Slot props
default	{ modelValue: number \| undefined; textValue: string; readonly: boolean; }

Data attribute	Values
data-disabled	—

data-readonly	—

Recipe number-field	Sets
base: number-field	2 properties

Parts

Anatomy

Styling

Install

API reference

NumberField NumberField.vue

NumberFieldContent NumberFieldContent.vue

NumberFieldDecrement NumberFieldDecrement.vue

NumberFieldIncrement NumberFieldIncrement.vue

NumberFieldInput NumberFieldInput.vue