Number Input

A component for entering numeric values

Label

Anatomy

Usage

<script>
  import {NumberInput} from 'ui-ingredients';
  import {ChevronDownIcon, ChevronUpIcon} from '$lib/icons';
</script>

<NumberInput.Root>
  <NumberInput.Label>Label</NumberInput.Label>
  <NumberInput.Control>
    <NumberInput.Input />
    <NumberInput.IncrementTrigger>
      <ChevronUpIcon />
    </NumberInput.IncrementTrigger>
    <NumberInput.DecrementTrigger>
      <ChevronDownIcon />
    </NumberInput.DecrementTrigger>
  </NumberInput.Control>
</NumberInput.Root>

Usage with Field component

<script>
  import {NumberInput, Field} from 'ui-ingredients';
  import {ChevronDownIcon, ChevronUpIcon} from '$lib/icons';
</script>

<Field.Root>
  <NumberInput.Root>
    <NumberInput.Label>Label</NumberInput.Label>
    <NumberInput.Control>
      <NumberInput.Input />
      <NumberInput.IncrementTrigger>
        <ChevronUpIcon />
      </NumberInput.IncrementTrigger>
      <NumberInput.DecrementTrigger>
        <ChevronDownIcon />
      </NumberInput.DecrementTrigger>
    </NumberInput.Control>
  </NumberInput.Root>

  <Field.HelperText>This is a helper text</Field.HelperText>
  <Field.ErrorText>This is an error text</Field.ErrorText>
</Field.Root>

API Reference

Root

Prop	Default	Description
`allowMouseWheel`		`boolean` Whether to allow mouse wheel to change the value
`allowOverflow`	`true`	`boolean` Whether to allow the value overflow the min/max range
`clampValueOnBlur`	`true`	`boolean` Whether to clamp the value when the input loses focus (blur)
`defaultValue`		`string` The initial value of the input when rendered. Use when you don't need to control the value of the input.
`disabled`		`boolean` Whether the number input is disabled.
`focusInputOnChange`	`true`	`boolean` Whether to focus input when the value changes
`form`		`string` The associate form of the input element.
`formatOptions`		`Intl.NumberFormatOptions` The options to pass to the `Intl.NumberFormat` constructor
`id`		`string` The unique identifier of the machine.
`ids`		`{ root?: string; label?: string; input?: string; incrementTrigger?: string; decrementTrigger?: string; scrubber?: string; }` The ids of the elements in the number input. Useful for composition.
`inputMode`	`"decimal"`	`InputMode` Hints at the type of data that might be entered by the user. It also determines the type of keyboard shown to the user on mobile devices
`invalid`		`boolean` Whether the number input value is invalid.
`locale`	`"en-US"`	`string` The current locale. Based on the BCP 47 definition.
`max`	`Number.MAX_SAFE_INTEGER`	`number` The maximum value of the number input
`min`	`Number.MIN_SAFE_INTEGER`	`number` The minimum value of the number input
`name`		`string` The name attribute of the number input. Useful for form submission.
`onFocusChange`		`(details: FocusChangeDetails) => void` Function invoked when the number input is focused
`onValueChange`		`(details: ValueChangeDetails) => void` Function invoked when the value changes
`onValueInvalid`		`(details: ValueInvalidDetails) => void` Function invoked when the value overflows or underflows the min/max range
`pattern`	`"[0-9]*(.[0-9]+)?"`	`string` The pattern used to check the <input> element's value against
`readOnly`		`boolean` Whether the number input is readonly
`required`		`boolean` Whether the number input is required
`spinOnPress`	`true`	`boolean` Whether to spin the value when the increment/decrement button is pressed
`step`	`1`	`number` The amount to increment or decrement the value by
`translations`		`IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`value`		`string` The controlled value of the input
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-focus`	Present when focused
`data-invalid`	Present when invalid
`data-part`	root
`data-scope`	number-input

Control

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-focus`	Present when focused
`data-invalid`	Present when invalid
`data-part`	control
`data-scope`	number-input

DecrementTrigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-part`	decrement-trigger
`data-scope`	number-input

IncrementTrigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-part`	increment-trigger
`data-scope`	number-input

Input

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-invalid`	Present when invalid
`data-part`	input
`data-scope`	number-input

Label

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-focus`	Present when focused
`data-invalid`	Present when invalid
`data-part`	label
`data-scope`	number-input

Scrubber

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-part`	scrubber
`data-scope`	number-input

ValueText

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-focus`	Present when focused
`data-invalid`	Present when invalid
`data-part`	value-text
`data-scope`	number-input

Accessibility

Keyboard Support

Key	Description
ArrowUp	Increments the value of the number input by a predefined step.
ArrowDown	Decrements the value of the number input by a predefined step.
PageUp	Increments the value of the number input by a larger predefined step.
PageDown	Decrements the value of the number input by a larger predefined step.
Home	Sets the value of the number input to its minimum allowed value.
End	Sets the value of the number input to its maximum allowed value.
Enter	Submits the value entered in the number input.