NumberField

Role and semantics

NumberField renders a text box through Base UI NumberField; inputmode opens the numeric keypad. aria-roledescription is localised (“Number field” or “Sayı alanı”) instead of Base UI’s English default. The label is bound with <label>; the description and error are read through aria-describedby. The step buttons point to the field with aria-controls and are named in the Provider language.

Keyboard

Key	Behaviour
Tab	Moves focus to the field; the step buttons are skipped.
Up and Down arrow	Change the value by step.
Shift + arrow, Page Up, Page Down	Change the value by largeStep.
Alt + arrow	Small step (step / 10).
Home, End	Jump to min or max when it is set.
Enter	Commits the value (onValueCommitted).

Focus

Focus wraps the whole box: a 2 px color-focus-ring ring and the focus border (focus-within). Pressing a step button with a pointer leaves focus in the field.

Screen reader output

Example	Output
Default	“Quantity, Number field, 1”
With a unit	“Number of days (days), Number field, 7”
Moved to a bound	“Value changed to 30”, polite announcement

Contrast

The color-border-input box border has at least 3:1 contrast on the background; the color-text-subtle step icons have at least 4.5:1.

WCAG 2.2

Criterion	How NumberField meets it	What product teams must do
1.3.1 Info and relationships	Label, description and error are bound to the field; the unit is part of the name.	Do not put the unit only in the placeholder.
2.5.8 Target size (minimum)	Step buttons are 32 px.	Do not shrink the buttons with className.
3.3.1 Error identification	The error text is bound to the field; the border is not the only cue.	Write errors that state the range.
3.3.2 Labels or instructions	The range can be shown in the description.	Put the range in the description when it matters.
4.1.3 Status messages	Moving to a bound is announced with role="status".	—