NumberField — Loidolt Theme

import { NumberField } from '@loidolt/theme-svelte';

Example

Value: 12

Value: not set

Clearing the field cannot wedge it: an empty value clamps back to min, or to zero when unbounded.
At a bound the spin button goes aria-disabled rather than disabled, so it keeps focus instead of dropping it.
nullable lets the field be empty: clearing it yields null instead of the low bound. Type the bound variable as number | null.
readonly locks the steppers too; hideSteppers drops them for dense tables. The arrow keys still step.

Generated from the component source, so it cannot drift from the implementation.

NumberField props
Prop	Type	Default	Notes
`label` required	`string`	`—`	Accessible name of the field; also used to name the two spin buttons.
`boxed`	`boolean`	`false`	Draws the full box instead of the default underline.
`class`	`string`	`—`	`class` lands on the wrapper; use `inputClass` to reach the input.
`decrementLabel`	`(label: string) => string`	(name) => `Decrease ${name}`
`hideSteppers`	`boolean`	`false`	Hide the − and + buttons, for dense tables. The keyboard still steps with the arrows.
`incrementLabel`	`(label: string) => string`	(name) => `Increase ${name}`
`inputClass`	`string`	`—`
`max`	`number`	`Infinity`
`min`	`number`	`-Infinity`
`nullable`	`boolean`	`false`	Let the field be empty: clearing it yields `null` instead of snapping to the low bound. For optional quantities where "not set" differs from zero. Type `value` as `number \| null` to bind it.
`onValueChange`	`(value: V) => void`	`—`
`ref` bindable	`HTMLInputElement \| null`	`null`
`step`	`number`	`1`
`value` bindable	`V`	`0 as V`	A number, or `null` for an empty field when `nullable` is set.

Plus the attributes of Omit<HTMLInputAttributes, 'type' | 'value' | 'min' | 'max' | 'step'>, forwarded to the root element.