NumberField

A number typed in the page's own notation, such as an amount of money, based on react-aria-components: "1.000,50" in Dutch, "1,000.50" in English. The field shows the number formatted and hands over a plain number, so a caller never parses text. Errors come from the enclosing Form by name.

import { NumberField } from "@evolve-storefront/ui/number-field";

Preview

DefaultOpen in Storybook ↗

Usage

<NumberField name="quantity" label={t("quantity")} min={0} value={quantity} onValueChange={setQuantity} />;

Props

Prop	Type	Description
label	ReactNode	The visible label, which is also the field's accessible name.
name?	string
description?	ReactNode
value?	number | null	null is an empty field.
defaultValue?	number
onValueChange?	((value: number | null) => void)	Hands over the number on Enter or blur, or null when the field is emptied.
min?	number
max?	number
step?	number
formatOptions?	NumberFormatOptions	How the number reads and parses, such as { style: "currency", currency: "EUR" }.
locale?	string	The page's locale, for formatOptions; ui has no locale of its own.
placeholder?	string
disabled?	boolean
required?	boolean
readOnly?	boolean
invalid?	boolean

Any other props go to the root element, like on a plain HTML element.

Examples

MoneyAn amount, typed and shown as the page's locale writes money: "1.000,50" in Dutch.

<NumberField
  label={t("amount")}
  locale={locale}
  formatOptions={{ style: "currency", currency: "EUR" }}
  value={amount}
  onValueChange={setAmount}
/>;

Open in Storybook ↗