REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Form Controls

NumberInput

A numeric input with increment and decrement buttons.

Example

Preview

Code

Props

NumberInput Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes to apply to the number input container.

value

number

—

The current numeric value.

onChange

(value: number) => void

—

Callback invoked when the value changes.

min

number

—

The minimum allowed value.

max

number

—

The maximum allowed value.

step

number

1

The increment/decrement step amount.

size

'sm' | 'md' | 'lg'

'md'

Controls the size of the input and stepper buttons.

isDisabled

boolean

false

When true, disables the input and stepper buttons.

NumberInputField Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the numeric text field.

placeholder

string

—

Placeholder text for the input field.

NumberInputStepper Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the stepper container.

NumberInputIncrementButton Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the increment button.

NumberInputDecrementButton Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the decrement button.

Usage Guidelines

When to use

Use NumberInput for numeric values that benefit from step buttons, like quantities, prices, or settings.

Best practices

•

Set min and max bounds to prevent invalid values.

•

Use an appropriate step value — 1 for integers, 0.1 for decimals.

•

Wrap with FormControl for label and validation support.

Accessibility

NumberInput supports keyboard increment/decrement with arrow keys. The value is announced to screen readers on change.

Related Components

Input

A compound text input component with support for leading/trailing slots, icons, and multiple visual variants.

Slider

A compound range slider component with track, filled track, and thumb sub-components for selecting numeric values.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License