NumberInput

The NumberInput component is like the Input component but includes controls to adjust a numeric value.

Preview
Code

Installation

npm
yarn
pnpm
bun

npm i @melio-ui/number-input

If @melio-ui/react is already installed globally, you can skip this step.

Import

Individual
Global

import { 
  NumberInputRoot,
  NumberInputField,
  NumberInputButtonGroup,
  NumberInputPlus,
  NumberInputMinus,
} from '@melio-ui/number-input';

NumberInputRoot: All parts of the number input are included.
NumberInputField: The input field itself.
NumberInputButtonGroup: A wrapper for the input's increment and decrement buttons.
NumberInputPlus: This button increases the input value.
NumberInputMinus: This button decreases the input value.

Another way to import

'use client';

import { NumberInput } from '@melio-ui/number-input';

<NumberInput.Root>
  <NumberInput.Field />
  <NumberInput.ButtonGroup>
    <NumberInput.Plus />
    <NumberInput.Minus />
  </NumberInput.ButtonGroup>
</NumberInput.Root>;

'use client' must be used when rendering on the server side.

API Reference

NumberInputRoot

All parts of the number input are included.

Prop	Type	Default	Description
value	`NumberInputValue number \| null`	-	The number input value.
defaultValue	`NumberInputValue number \| null`	-	The initial value of the number input when first rendered, for use when state control isn't needed.
disabled	`boolean`	-	Determines if the input field and buttons are disabled.
min	`number`	-Infinity	Minimum value of number input.
max	`number`	Infinity	Maximum value for numeric input.
step	`number`	1	Steps used to increase or decrease values.
onValueChange	`(value: NumberInputValue) => void`	-	An event handler that is called when the value changes.

Data attribute	Values
[data-disabled]	Visible when disabled
[data-readonly]	Visible when read-only

NumberInputField

The input field itself.

NumberInputButtonGroup

A wrapper for the input's increment and decrement buttons.

NumberInputPlus

This button increases the input value.

Prop	Type	Default	Description
asChild	`boolean`	-	Changes the default rendering element passed as a child, merging its props and behavior.

NumberInputMinus

This button decreases the input value.

Prop	Type	Default	Description
asChild	`boolean`	-	Changes the default rendering element passed as a child, merging its props and behavior.

Examples

Set the minimum and maximum values

<NumberInputRoot min={0} max={100} defaultValue={50}>
  <NumberInputField />
  <NumberInputButtonGroup>
    <NumberInputPlus />
    <NumberInputMinus />
  </NumberInputButtonGroup>
</NumberInputRoot>

Set step size

<NumberInputRoot step={5} min={0} max={50} defaultValue={20}>
  <NumberInputField />
  <NumberInputButtonGroup>
    <NumberInputPlus />
    <NumberInputMinus />
  </NumberInputButtonGroup>
</NumberInputRoot>

Custom Style

<NumberInputRoot>
  <NumberInputField style={{ fontSize: '0.75rem', height: '1.5rem' }} />
  <NumberInputButtonGroup style={{ height: '1.5rem' }}>
    <NumberInputPlus style={{ fontSize: '0.75rem', height: '0.75rem' }} />
    <NumberInputMinus style={{ fontSize: '0.75rem', height: '0.75rem' }} />
  </NumberInputButtonGroup>
</NumberInputRoot>

Dropdown

Popover