Components

Number Field

A number to type or step with − and +, the arrow keys and Page Up and Down: shown the locale’s way, as a percentage or a unit, and kept within bounds.

Split between

People sharing the bill

Import

import { NumberField } from '@rinzai/zen';

Examples

Formats

formatOptions shows it as a percentage, a unit or with set decimals, and reads it back typed that way.

Interest rate

Distance

API reference

<NumberField>

A number to type or step: − and + on either side, ↑↓ by step, Page Up and Page Down by largeStep, Home and End to min and max. Shown in the locale's way (formatOptions: a percentage, a unit, decimals) and read back from what's typed in it, digits, separators and all. Kept within min and max once you leave the field; empty is null.

Prop	Type	Default
`defaultValue` The first number, when the field keeps its own.	`number \| null`	`null`
`formatOptions` How it's shown, as for Intl.NumberFormat: { style: 'percent' }, { maximumFractionDigits: 2 }, a unit.	`NumberFormatOptions`	`—`
`invalid` Show the field in its error state.	`boolean`	`—`
`largeStep` What Page Up and Page Down do. Default ten steps.	`number`	`step * 10`
`locale` Defaults to the LocaleProvider's.	`string`	`—`
`max`	`number`	`—`
`min`	`number`	`—`
`name` Form field name: the number is submitted under it.	`string`	`—`
`onValueChange`	`((value: number \| null) => void)`	`—`
`size` Height, matching Button's.	`"default" \| "lg" \| "sm"`	`default`
`step` What ↑↓ and − + add or take away. Default 1.	`number`	`1`
`value` The number, or null for empty, when you keep it.	`number \| null`	`—`