'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Forms
NumberField
Numbers with steppers, limits and locale formatting for currency, percent and units.
Ant Design: InputNumber
import { NumberField } from '@alea/ui';
Examples
Number field
Steppers, limits and keyboard steps.
Formats
Currency, percent and units, in the person's locale.
Props
NumberField props
A number input with steppers, min, max, step and locale formatting (currency, percent, units).
| Prop | Type | Default | Description |
|---|---|---|---|
description | ReactNode | - | Help text under the field. |
errorMessage | ReactNode | ((v: ValidationResult) => ReactNode) | - | Error text, or a function of the validation result. Shown when invalid. |
label | ReactNode | - | The visible label. Use aria-label instead only when the context makes it obvious. |
placeholder | string | - | Placeholder text. |
showOptional | boolean | - | Shows "(optional)" after the label. |
showStepper | boolean | true | Shows the − and + buttons. Default true. |
size | "sm" | "md" | "lg" | 'md' | sm 32 px, md 44 px (default), lg 48 px. |
Accessibility
- The input is a text field with the formatted value; the steppers are labelled Increase and Decrease.
Keyboard
| Key | Does |
|---|---|
| Arrow Up / Down | Steps by step |
| Page Up / Down | Steps by ten steps |
| Home / End | Jump to min / max |
Do and don't
Do
- Set minValue and maxValue when there are real limits.
Don't
- Don't use it for numbers that are not quantities (phone, card, ZIP): use TextField with inputMode.