FormsReact Native

Number field

Edit localized numeric drafts with exact decimal steps and inclusive bounds.

Public APILumenNumberFieldReact Native

Native example

Use Number field

Preserve the raw localized String draft, including unfinished sign or decimal input. Grouping and exponent notation are unsupported. Keep currency, units, required validation, and submission parsing application-owned.

View captured React Native example

Number field rendered in the Expo web renderer Lumen playground — Captured exampleExpo web renderer

import { useState } from 'react'
import { LumenNumberField } from '@santi020k/lumen-react-native'

export function Quantity() {
  const [draft, setDraft] = useState('1')
  return <LumenNumberField label="Quantity" value={draft} onValueChange={setDraft}
    min="0" max="10" step="0.5" locale="en-US"
    incrementLabel="Increase quantity" decrementLabel="Decrease quantity" />
}

Reference

Public API

The primary shared and platform-specific options exposed by LumenNumberField.

API	Values or type	Default	Description
label	string	Required	Names the numeric field.
value / onValueChange	string / (string) => void	Required	Retains raw localized drafts; invalid drafts remain editable.
min / max / step	string	undefined / undefined / 1	Uses exact decimal strings for inclusive bounds and positive steps.
locale	string	undefined	Selects accepted decimal separator and digits.
incrementLabel / decrementLabel	string	Increase value / Decrease value	Names step actions.
invalidNumberLabel / outOfRangeLabel	string	Enter a valid number / Enter a number within the allowed range	Localizes draft validation.
showStepper	boolean	true	Shows step actions.
ref / TextInput props	LumenTextInputRef / TextInputProps	undefined	Forwards input focus and supported native options.
description / errorMessage	string	undefined	Provides localized supporting copy or host validation.
enabled / readOnly	boolean	true / false	Blocks changes without clearing controlled state.

Native behavior

Design and accessibility

When to use it

Accessibility

Labels the editable numeric draft and step actions, exposes invalid or out-of-range context, and disables unavailable or read-only steps.

Shared component

Available on other platforms

Apple / SwiftUI Android / Compose