Number Input

An input component for entering numeric values with increment and decrement controls.

Anatomy

<script>
  import { NumberInput } from "@saas-ui/svelte/components/number-input";
</script>

<NumberInput
  min={0}
  max={100}
  step={1}
  defaultValue="10"
/>

Examples

Basic Accessibility

Basic number input with default styling and increment/decrement buttons.

<Box class="w-52">
	<NumberInput aria-label="Number" defaultValue="10" />
</Box>

Colours Accessibility

Number input with different colour schemes using the colour prop.

<Stack gap={4} class="max-w-72">
	{#each colours as colour}
		<HStack align="center" gap={4}>
			<Text size="xs" class="w-16">{colour}</Text>
			<NumberInput
				{colour}
				defaultValue="10"
				aria-label="Number {colour}"
				class="flex-1"
			/>
		</HStack>
	{/each}
</Stack>

Disabled Accessibility

Disabled number input that prevents user interaction.

<Box class="w-52">
	<NumberInput defaultValue="10" disabled aria-label="Number" />
</Box>

Format Currency Accessibility

Number input with value formatted as currency.

<Stack gap={4} class="max-w-52">
	<NumberInput
		defaultValue="45"
		formatOptions={{
			style: "currency",
			currency: "EUR",
			currencyDisplay: "code",
			currencySign: "accounting",
		}}
		aria-label="Amount"
	/>
</Stack>

Format Percent Accessibility

Number input with value formatted as percentage.

<Stack gap={4} class="max-w-52">
	<NumberInput
		defaultValue="5"
		step={0.01}
		formatOptions={{
			style: "percent",
		}}
		aria-label="Percentage"
	/>
</Stack>

Format Unit Accessibility

Number input with value formatted with a unit suffix.

<Stack gap={4} class="max-w-52">
	<NumberInput
		defaultValue="4"
		formatOptions={{
			style: "unit",
			unit: "inch",
			unitDisplay: "long",
		}}
		aria-label="Length"
	/>
</Stack>

Invalid Accessibility

Use the invalid prop to display validation error styling.

<Field.Root invalid class="w-52">
	<Field.Label>Enter Number</Field.Label>
	<NumberInput defaultValue="10" aria-label="Enter Number" />
	<Field.ErrorText>The entry is invalid</Field.ErrorText>
</Field.Root>

Min And Max Accessibility

Number input with min and max constraints to limit the value range.

<Box class="w-52">
	<NumberInput defaultValue="10" min={5} max={50} aria-label="Number" />
</Box>

Mouse Wheel Accessibility

Number input with mouse wheel support enabled via allowMouseWheel prop.

<Box class="w-52">
	<NumberInput defaultValue="10" allowMouseWheel aria-label="Number" />
</Box>

Sizes Accessibility

Number input in different sizes. Available sizes: xs, sm, md, lg.

<Stack gap={4} class="max-w-52">
	{#each numberInputSizes as size}
		<HStack align="center" gap={4}>
			<Text size="xs" class="min-w-[3ch]">{size}</Text>
			<NumberInput
				{size}
				defaultValue="10"
				aria-label="Number {size}"
				class="flex-1"
			/>
		</HStack>
	{/each}
</Stack>

Step Accessibility

Number input with custom step value for increment/decrement operations.

<Box class="w-52">
	<NumberInput defaultValue="2" step={3} aria-label="Number" />
</Box>

With Field Accessibility

Number input with Field wrapper for label and helper text support.

<Field.Root class="w-52">
	<Field.Label>Enter Number</Field.Label>
	<NumberInput aria-label="Enter Number" />
	<Field.HelperText>Enter a number between 1 and 10</Field.HelperText>
</Field.Root>

Props

NumberInput

A complete number input component with increment/decrement controls.

Prop	Type	Default	Description
`size`	`"xs" \| "sm" \| "md" \| "lg"`	`"md"`	The size of the number input.
`colour`	`ColourName`	`"gray"`	The colour theme of the number input.
`invalid`	`boolean`	`false`	Whether the number input is in an invalid state.
`disabled`	`boolean`	`false`	Whether the number input is disabled.
`placeholder`	`string`	`-`	Placeholder text for the input.
`value`	`string`	`-`	The current value of the number input.
`defaultValue`	`string`	`-`	The default value of the number input.
`onValueChange`	`(details: { value: string; valueAsNumber: number }) => void`	`-`	Callback when the value changes.
`min`	`number`	`-`	The minimum value allowed.
`max`	`number`	`-`	The maximum value allowed.
`step`	`number`	`1`	The step increment/decrement value.
`allowMouseWheel`	`boolean`	`false`	Whether to allow mouse wheel to change the value.
`clampValueOnBlur`	`boolean`	`true`	Whether to clamp the value when the input loses focus.
`allowOverflow`	`boolean`	`false`	Whether to allow the value to overflow the min/max range.
`spinOnPress`	`boolean`	`true`	Whether to spin the value when the increment/decrement button is pressed.
`inputMode`	`"text" \| "decimal" \| "numeric"`	`"decimal"`	The input mode for the input element.
`locale`	`string`	`"en-US"`	The locale for formatting.
`formatOptions`	`Intl.NumberFormatOptions`	`-`	Format options for Intl.NumberFormat.
`name`	`string`	`-`	The name attribute for form submission.
`required`	`boolean`	`false`	Whether the input is required.
`readOnly`	`boolean`	`false`	Whether the input is read-only.
`aria-label`	`string`	`-`	Accessible label for the input (for screen readers).
`class`	`string`	`-`	Additional CSS classes to apply.
`style`	`string`	`-`	Inline styles.
`id`	`string`	`-`	The id of the input element.