Theme
Number field
A number, typed or stepped, formatted for the reader's locale.
Examples
Props
NumberField
A number, typed or stepped, formatted for the reader's locale. Arrow keys step it.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | The visible label. Every field has one; it names the field for screen readers too. Text, so it can also be the field's aria-label: see `useFallbackName`. |
description? | ReactNode | — | Help shown under the field and read with it. |
errorMessage? | ReactNode | ((validation: ValidationResult) => ReactNode) | — | Shown when the field is invalid; defaults to the browser's validation message. |
Also takes 111 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
Keyboard
| Key | Does |
|---|---|
| ArrowUp or ArrowDown | Steps the value |
| PageUp or PageDown | Steps by a larger amount |
| Home or End | Goes to the minimum or maximum |
Accessibility
- The label is required and is the field's accessible name; the description and error are linked with aria-describedby.
- Invalid fields are marked aria-invalid, and the error is announced when it appears.
- The border meets 3:1 against every surface (borderControl), and text 4.5:1, in every theme.
- The step buttons are labelled and are not tab stops; the keys do the same.