On this page

NumberInput

A numeric input component with increment/decrement controls and validation.

import { NumberInput } from "@ninna-ui/forms";

pnpm add @ninna-ui/forms@latest

Includes @ninna-ui/core. CSS setup required.View source

Usage

Import and use the NumberInput component in your application.

import { NumberInput } from "@ninna-ui/forms";

export default function Example() {
  return (
    <NumberInput
      min={0}
      max={100}
      step={1}
      defaultValue={50}
    />
  );
}

Basic

Basic number input with stepper controls.

Live preview/ Default

Sizes

NumberInput in different sizes.

Live preview/ Default

Min/Max

Constrain values within a range.

Live preview/ Default

Value clamped between 0 and 100

Min/Max/Step

Constrain values with custom step increments.

Live preview/ Default

Min: 0, Max: 10

Step: 5

Step: 0.1

Stepper Positions

Different stepper button layouts.

Live preview/ Default

Stepper on Right (default)

Stepper on Sides

No Stepper

Precision

Decimal precision for floating point numbers.

Live preview/ Default

2 decimal places, step by 0.01

Formatting

Custom format and parse functions for display.

Live preview/ Default

Precision: 2 decimals

Currency format

Percentage format

States

NumberInput in different states: disabled, invalid, read-only.

Live preview/ Default

Normal

Disabled

Invalid

Read-only

React Hook Form

NumberInput works with React Hook Form using the Controller pattern.

Live preview/ Default

API Reference

Complete list of props for the NumberInput component.

Props

Prop	Type	Default	Description
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Size of the input
`value`	`number`	`—`	Controlled value
`defaultValue`	`number`	`—`	Default value (uncontrolled)
`onChange`	`(value: number) => void`	`—`	Callback when value changes
`min`	`number`	`—`	Minimum value
`max`	`number`	`—`	Maximum value
`step`	`number`	`1`	Step increment
`precision`	`number`	`—`	Decimal places
`showStepper`	`boolean`	`true`	Show stepper buttons
`stepperPosition`	`'right' \| 'sides'`	`'right'`	Stepper position
`disabled`	`boolean`	`false`	Disabled state
`invalid`	`boolean`	`false`	Invalid state
`readOnly`	`boolean`	`false`	Read-only state
`required`	`boolean`	`false`	Whether the input is required
`allowKeyboardInput`	`boolean`	`true`	Allow typing values directly
`format`	`(value: number) => string`	`—`	Custom format function for display value
`parse`	`(value: string) => number`	`—`	Custom parse function for input value
`name`	`string`	`—`	Name for form submission
`id`	`string`	`—`	ID for the input element
`incrementLabel`	`string`	`'Increase value'`	Accessible label for the increment button
`decrementLabel`	`string`	`'Decrease value'`	Accessible label for the decrement button

Accessibility

Uses role="spinbutton" with aria-valuemin, aria-valuemax, and aria-valuenow
Stepper buttons have customizable labels via incrementLabel and decrementLabel props
Arrow Up/Down keys increment/decrement the value
Proper aria-invalid, aria-disabled, and aria-required states
Supports all native input ARIA attributes via props spread