Input Number
A numeric input with native browser number validation. Native spinners are hidden by default. Supports min, max, and step constraints.
Keyboard interaction
| Key | Action |
|---|---|
| Tab | Move focus to the number input. |
| Shift + Tab | Move focus away from the number input to the previous element. |
| Type | Enter a numeric value directly into the field. |
| Arrow Up | Increment the value by the current step amount. |
| Arrow Down | Decrement the value by the current step amount. |
| Enter | Submit the enclosing form (if any). |
Screen reader behaviour
The following ARIA attributes are managed internally by the component:
| Property | Value | Note |
|---|---|---|
role="spinbutton" | Assigned automatically by the browser | Conveys that the field accepts a numeric range. Screen readers announce the current value, min, and max. |
aria-required | "true" when required is set | Communicates the required state to assistive technologies. |
aria-invalid | "true" when state="error" | Signals a validation failure. Paired with aria-describedby pointing at the error message. |
aria-valuemin / aria-valuemax | Reflect the min and max props | Exposed to screen readers as part of the spinbutton role — announced on focus. |
aria-describedby | ID of the message or description element | Links the error or description text to the input so screen readers announce it on focus. |
Label association
The label is associated with the inner <input type="number"> via Shadow DOM id association. Screen readers announce the label on focus.
Input type semantics
type="number" implies role="spinbutton". Screen readers announce the current value, minimum, and maximum when present. Arrow-key increment behaviour is communicated automatically.
min / max
The min and max props map directly to the HTML attributes, which are surfaced to assistive technology as part of the spinbutton role.
Required fields
required adds a visual asterisk and aria-required="true".
Validation state
state="error" sets aria-invalid="true" and links the error message via aria-describedby.
Spinner arrows
The native browser spinner arrows are hidden via CSS for visual consistency. Keyboard users can still adjust the value with ↑ / ↓ arrow keys. Screen readers continue to announce the step behaviour because the role is spinbutton.
Focus management
delegatesFocus: true routes host focus to the inner input. Reduced-motion styles respect prefers-reduced-motion.
WCAG 2.2 compliance
1.3.1 Info and Relationships — APass
Label, required indicator, and error message are all programmatically associated with the input via ARIA attributes.
1.4.3 Contrast (Minimum) — AAPass
Input text and label foreground colours meet the 4.5:1 minimum contrast ratio against the field background in both themes.
2.1.1 Keyboard — APass
All functionality is operable via keyboard. Arrow keys increment and decrement the numeric value by the step amount.
2.4.7 Focus Visible — AAPass
A visible focus ring is applied on keyboard focus using :focus-visible styles.
3.3.1 Error Identification — APass
When state="error", the error message is linked via aria-describedby so screen readers announce it on focus.
4.1.2 Name, Role, Value — APass
The inner <input type="number"> exposes role="spinbutton", name, and value; min and max are reflected as aria-valuemin and aria-valuemax.
Best practices
- Reduced motion — all CSS transitions inside the shadow DOM respond to
prefers-reduced-motion: reduceand are suppressed automatically. - Spinner arrows — the native browser spinner arrows are visually hidden for consistency. Keyboard users can still adjust the value with ↑ / ↓ arrow keys — screen readers continue to announce the step behaviour via the
spinbuttonrole. - Error messaging — always pair
state="error"with a meaningfulmessageprop. Colour alone is insufficient for users who cannot distinguish red from other colours.