NumberField

NumberField

<NumberField label="Quantity" defaultValue={1} minValue={0} maxValue={99} />

<NumberField
  label="Budget"
  defaultValue={1000}
  formatOptions={{ style: 'currency', currency: 'USD' }}
  minValue={0}
  step={50}
/>

Install: @helixui/core

import { NumberField } from '@helixui/core'

status: stable · since: 0.2.0

Tags: number, input, stepper, numeric

Anatomy

Label
[          1,234 ][−][+]
Description / error

Layout

• display — block
• width — fill
• height — content
• intrinsicSize — fills width, hugs height
• stackable — true
• fullBleed — false

Visual

A text input formatted as a number with optional +/- steppers on the right. Locale-aware parsing (commas vs dots) and validation against min/max/step.

Props

Name	Type	Default	Description
label	ReactNode	—	Visible label.
description	ReactNode	—	Helper text.
errorMessage	string | (v: ValidationResult) => string	—	Error text.
size	'sm' | 'md' | 'lg'	md	Control height.
steppers	boolean	true	Show +/- buttons inside the group.
minValue	number	—	Minimum allowed value.
maxValue	number	—	Maximum allowed value.
step	number	1	Step amount per +/- click.
formatOptions	Intl.NumberFormatOptions	—	Locale formatting (currency, percent, units).

Tokens used

color.bg.surface.default, color.bg.surface.muted, color.bg.action.neutral.default, color.border.default, color.border.focus, color.border.danger, color.text.primary, color.text.secondary, color.text.action.danger, radius.md, space.2, space.3, font.family.sans, font.size.sm, font.size.md, font.size.lg, font.weight.medium

Accessibility

Notes

• Built on react-aria-components NumberField — locale-aware parsing/formatting and ARIA spinbutton semantics.
• Pass formatOptions (Intl.NumberFormatOptions) for currency, percent, or unit-formatted inputs.

Composes with

Component	Relation	Note
Field	wraps	NumberField has built-in label/description/error like other RAC inputs.
Form	parent	Submitted as part of a Form.
TextInput	sibling
Slider	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

quantity input

“number input with min 0 max 99”

<NumberField label="Qty" minValue={0} maxValue={99} value={qty} onChange={setQty} />

Related

• TextInput
• Slider