Components · Form & Input
Number Input
StableSince v0.0.1
A numeric input with increment and decrement controls, supporting min/max clamping and step.
import { NumberInput } from '@nexub/react';Examples
Default
With range
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Controlled value of the input. |
| min | number | — | Minimum allowed value. |
| max | number | — | Maximum allowed value. |
| step | number | 1 | Amount to increment or decrement on each step. |
| disabled | boolean | — | Disables the input and its controls. |
| size | 'sm' | 'md' | 'lg' | — | Controls font size and padding. |
On iOS & Android: Stepper
@nexub/react-nativeAlpha
import { Stepper } from '@nexub/react-native';
<Stepper label="Guests" min={1} max={8} defaultValue={2} />Web vs mobile
Same tokens and prop names. Where the platforms differ:
| Web | iOS & Android | |
|---|---|---|
| Control | A field with steppers; type a number. | Stepper: − / + buttons with the value between; no keyboard. |
Interactive preview of @nexub/react-native rendered for the web. Native chrome (switches, pickers, Liquid Glass) looks like the platform on a device.
On device
iPhone (iOS simulator)
Pixel (Android emulator)
Screenshots from the latest CI run of the showcase app; the live frame renders the same code for the web.
Stepper props
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | — | Accessible name of the value, e.g. "Guests". |
| value | number | — | — |
| defaultValue | number | — | — |
| onValueChange | (value: number) => void | — | — |
| min | number | — | — |
| max | number | — | — |
| step | number | 1 | — |
| disabled | boolean | — | — |
| style | StyleProp<ViewStyle> | — | — |