Number Field

Numeric input with stepper buttons, locale formatting, units and currency.

Import

import { NumberField } from '@marbleui/ui'

Props

<NumberField>

Prop	Type	Default	Description
description	`ReactNode`	`—`
errorMessage	`string \| ((validation: ValidationResult) => string)`	`—`
label	`ReactNode`	`—`
layout	`'split' \| 'stacked'`	`'stacked'`	"stacked": chevrons on the right. "split": − value +
variant	`FieldVariant`	`—`

Also accepts React Aria props (114).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Button · React Aria Group · React Aria Input · React Aria NumberField. Follow the primitive's docs for the full keyboard map.

Usage notes

Numeric input with stepper buttons, locale-aware formatting, units and currency. For a free-form value on a range use Slider; for plain text use TextField.

<NumberField
  label="Price"
  defaultValue={49}
  minValue={0}
  formatOptions={{ style: 'currency', currency: 'USD' }}
/>

Controlled: value + onChange (a number). Limits and step come from minValue, maxValue and step.
formatOptions takes Intl.NumberFormat options, e.g. percent or currency. In percent mode the value is a fraction (0.15 shows 15%).
layout: stacked (chevrons at the right, default) or split (minus and plus around the value).
Without a visible label, pass aria-label.

Example source · show

import { NumberField } from './number-field'

export const styles = {
  Stacked: () => (
    <NumberField
      className="w-48"
      label="Price"
      defaultValue={49}
      minValue={0}
      formatOptions={{ style: 'currency', currency: 'USD' }}
    />
  ),
  Split: () => <NumberField className="w-40" label="Seats" layout="split" defaultValue={3} minValue={1} maxValue={50} />,
  Filled: () => (
    <NumberField
      className="w-48"
      variant="filled"
      label="Discount"
      defaultValue={0.15}
      step={0.05}
      minValue={0}
      maxValue={1}
      formatOptions={{ style: 'percent' }}
    />
  ),
}

Source: packages/ui/src/number-field/number-field.tsx

Catalog

Category: inputs
Priority: Foundation
Primitive: react-aria
React Aria: NumberField
Base UI: Number Field