NumberInput

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

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

pnpm add @ninna-ui/forms

Requires @ninna-ui/core (auto-installed) + CSS setup.

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.

Sizes

NumberInput in different sizes.

Min/Max

Constrain values within a range.

Value clamped between 0 and 100

Min/Max/Step

Constrain values with custom step increments.

Min: 0, Max: 10

Step: 5

Step: 0.1

Stepper Positions

Different stepper button layouts.

Stepper on Right (default)

Stepper on Sides

No Stepper

Precision

Decimal precision for floating point numbers.

2 decimal places, step by 0.01

Formatting

Custom format and parse functions for display.

Precision: 2 decimals

Currency format

Percentage format

States

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

Normal

Disabled

Invalid

Read-only

React Hook Form

NumberInput works with React Hook Form using the Controller pattern.

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