Studio
2

Number Field

Installation

pnpm dlx @mielui/svelte add number-field

Usage and accessibility

NumberField keeps one native number input as the form control. Put name, form, min, max, step, required, disabled, and readonly on Root. Bind value to a number or undefined; clearing the input yields undefined. Native validation handles required values, bounds and step mismatches. Typing does not silently clamp invalid values; increment and decrement follow the browser’s step rules. Invalid step sizes fall back to one.

Label and Input share an ID. Set Root’s inputId to customize both. When overriding Input’s id directly, also set Label’s for attribute, or use Field.Control to provide the naming relationship. Forward descriptions and errors to Input. Input remains usable if either step button is omitted or reordered.

ArrowUp and ArrowDown adjust the focused input. Step buttons stay independently keyboard reachable, stop at bounds, and respect disabled and readonly. There is no wheel interception. The component uses native numeric entry rather than currency formatting or drag scrubbing. Format read-only totals separately with Intl.NumberFormat.

For remote functions, put the numeric field name on Root, pass the remote field’s current number as value, and update it through onValueChange. Keep the remote form attachment on Form.Root; NumberField submits one canonical numeric value. Use Field.Control on Input for descriptions and validation errors.

Steps and composition

Form submission and reset

Disabled

API reference

NumberField.Root

Prop Type Default
value Bindable number | undefined —
inputId string | undefined —
min number | undefined —
max number | undefined —
step number | undefined 1
name string | undefined —
form string | undefined —
disabled boolean | undefined false
readonly boolean | undefined false
required boolean | undefined false
onValueChange ((value: number | undefined) => void) | undefined —
children Snippet<[{ value: number | undefined; }]> | undefined —
element Bindable HTMLDivElement | undefined —

NumberField.Decrement

Prop Type Default
onclick ((event: MouseEvent) => void) | undefined —
element Bindable HTMLButtonElement | undefined —

NumberField.Group

NumberField.Increment

Prop Type Default
onclick ((event: MouseEvent) => void) | undefined —
element Bindable HTMLButtonElement | undefined —

NumberField.Input

Prop Type Default
element Bindable HTMLInputElement | undefined —

NumberField.Label