NumberInput

A component that allows users to enter a number and increment or decrement the value.

Usage

A compound component that provides a way to enter and adjust numerical values.

import { NumberInput, Button, Icon } from "@elemnts-ui/react";

<NumberInput.Root defaultValue="10">
  <NumberInput.Label>Quantity</NumberInput.Label>
  <NumberInput.Input />
  <NumberInput.Control>
    <NumberInput.DecrementTrigger asChild>
      <Button variant="tertiary" size="xs">
        <Icon icon="tabler:minus" width="14" height="14" />
      </Button>
    </NumberInput.DecrementTrigger>
    <NumberInput.IncrementTrigger asChild>
      <Button variant="tertiary" size="xs">
        <Icon icon="tabler:plus" width="14" height="14" />
      </Button>
    </NumberInput.IncrementTrigger>
  </NumberInput.Control>
</NumberInput.Root>;

Min and Max

Use the min and max props to restrict the range of values.

Step

Use the step prop to change the increment/decrement amount.

Scrubber

The NumberInput.Scrubber allows users to change the value by clicking and dragging.

API Reference

NumberInput

The root container for the number input.

Prop	Type	Default
allowMouseWheel	`boolean`	-
allowOverflow	`boolean`	`true`
asChild	`boolean`	`false`
clampValueOnBlur	`boolean`	`true`
defaultValue	`string`	-
disabled	`boolean`	-
focusInputOnChange	`boolean`	`true`
form	`string`	-
formatOptions	`NumberFormatOptions`	-
id	`string`	-
ids	`Partial<{ root: string; label: string; input: string; incrementTrigger: string; decrementTrigger: string; scrubber: string }>`	-
inputMode	`InputMode`	`"decimal"`
invalid	`boolean`	-
largeStep	`number`	`10 * step`
locale	`string`	`"en-US"`
max	`number`	`Number.MAX_SAFE_INTEGER`
min	`number`	`Number.MIN_SAFE_INTEGER`
name	`string`	-
onFocusChange	`(details: FocusChangeDetails) => void`	-
onValueChange	`(details: ValueChangeDetails) => void`	-
onValueCommit	`(details: ValueChangeDetails) => void`	-
onValueInvalid	`(details: ValueInvalidDetails) => void`	-
pattern	`string`	`"-?[0-9]*(.[0-9]+)?"`
readOnly	`boolean`	-
required	`boolean`	-
smallStep	`number`	`step / 10`
spinOnPress	`boolean`	`true`
step	`number`	`1`
translations	`IntlTranslations`	-
value	`string`	-

NumberInputLabel

The label for the number input.

Prop	Type	Default
asChild	`boolean`	`false`

NumberInputControl

The container for the increment and decrement triggers.

Prop	Type	Default
asChild	`boolean`	`false`

NumberInputValueText

Displays the formatted value of the number input.

Prop	Type	Default
asChild	`boolean`	`false`

NumberInputInput

The input field for the numerical value.

Prop	Type	Default
asChild	`boolean`	`false`

NumberInputDecrementTrigger

The button to decrement the value.

Prop	Type	Default
asChild	`boolean`	`false`

NumberInputIncrementTrigger

The button to increment the value.

Prop	Type	Default
asChild	`boolean`	`false`

NumberInputScrubber

A region that allows users to change the value by dragging.

Prop	Type	Default
asChild	`boolean`	`false`