Forms

Number field

Enters a number, with buttons and keys to step it, written the way the reader's locale writes numbers.

Installation

npx sinaui add number-field

Copy src/lib/ui/NumberField.svelte, announce.ts, Icon.svelte and tokens.css. No other dependencies.

Examples

Basic

Hold a button to keep stepping, faster the longer you hold. The buttons stop at the limits.

Copies to make

<script lang="ts">
	import NumberField from '#lib/ui/NumberField.svelte';

	let copies = $state(3);
</script>

<NumberField label="Copies to make" bind:value={copies} min={1} max={20} name="copies" />

With a unit

Any Intl number format: units, currency, decimals. Typed values snap to the step when you leave the field.

Ink per page

<script lang="ts">
	import NumberField from '#lib/ui/NumberField.svelte';

	let ink = $state(2.5);
</script>

<NumberField
	label="Ink per page"
	bind:value={ink}
	min={0.5}
	max={10}
	step={0.5}
	format={{ style: 'unit', unit: 'milliliter', maximumFractionDigits: 1 }}
/>

Percent

Type 15 and it means 15%.

Scholar's discount

Up to 50% for students of the House of Wisdom.

<script lang="ts">
	import NumberField from '#lib/ui/NumberField.svelte';

	let discount = $state(0.1);
</script>

<!-- Typing "15" means 15%; the value is 0.15. -->
<NumberField
	label="Scholar's discount"
	bind:value={discount}
	min={0}
	max={0.5}
	step={0.05}
	format={{ style: 'percent' }}
	hint="Up to 50% for students of the House of Wisdom."
/>

Props

Prop	Type	Default
`label`	`string` (required)
`value`	`number`, bindable
`min`, `max`	`number`
`step`	`number`	`1`
`format`	`Intl.NumberFormatOptions`
`locale`	`string`	`'en'`
`name`	`string`
`hint`, `error`	`string`
`disabled`	`boolean`	`false`

Accessibility

A text field, so phones show a number keyboard and screen readers read what was typed as typed.
The buttons are skipped by Tab (the arrow keys do the same job) but screen readers can press them, and each change is announced.
Buttons are 44px on touch screens; holding one is the same as pressing it repeatedly.

Key	Action
`↑` `↓`	Step up / down.
`Page Up` `Page Down`	Ten steps up / down.
`Home` `End`	Minimum / maximum.
`Enter`	Take what was typed.