NumberField

A numeric field with steppers, min/max/step clamping and locale formatting.

Group: Inputs · Kind: native · in the lite catalog

Preview

example

Seats

disabled · true

Seats

Open in the playground

Platforms

The same specimen painted by React, SwiftUI, Compose and gpui.

Props

Prop	Type	Required	Bindable	Description
`label`	`string`	yes	–	The field label.
`name`	`string`	yes	–	The field’s key in the submitted data.
`value`	`number`	–	yes	The number; bind it.
`min`	`number`	–	–	The lowest value.
`max`	`number`	–	–	The highest value.
`step`	`number`	–	–	What the steppers and arrow keys add; Shift multiplies by 10. Default `1`.
`precision`	`number`	–	–	Decimal places shown; defaults to the step’s.
`unit`	`string`	–	–	A suffix after the number (`kg`, `%`).
`placeholder`	`string`	–	–	Hint text while empty.
`disabled`	`boolean`	–	–	Shows it inert. Default `false`.
`checks`	`[check]`	–	–	Validation rules.
`validateOn`	`change \| blur \| submit`	–	–	When the checks run. Default `"blur"`.

Events

on.change: runs an action
on.submit: runs an action
on.focus: runs an action
on.blur: runs an action

Slots

None.

Children

none

A2UI basic mapping

No basic catalog component maps here.

Built from

A native component: every renderer paints it directly.

Accessibility

Role: spinbutton

spinbutton (valuemin/valuemax/valuenow)

Keys	Action
`ArrowUp` `ArrowDown`	± step (Shift: ×10)
`PageUp` `PageDown`	± 10 steps
`Home` `End`	min/max
`Enter` `blur`	commit and clamp

Theming

Recipe parts: NumberField/root NumberField/label NumberField/field NumberField/decrement NumberField/increment NumberField/unit NumberField/description NumberField/error NumberField/input

Keyed by: disabled :hover :pressed :focus :disabled :checked :open :selected :invalid :dragover

Themes · Write a theme

Form · FieldGroup · FormActions · Input · Textarea · Checkbox · Radio · ChoiceTiles