NumberField

Alpha

An accessible numeric input with increment/decrement buttons, min/max/step constraints, and precision control.

Import

import { NumberField } from "@compa11y/react";

Usage

Example.tsx

import { useState } from "react";
import { NumberField, Text } from "@compa11y/react";

function QuantityPicker() {
  const [qty, setQty] = useState(1);

  return (
    <NumberField
      value={qty}
      onValueChange={setQty}
      min={1}
      max={99}
      label="Quantity"
    />
  );
}

function PriceInput() {
  const [price, setPrice] = useState(9.99);

  return (
    <NumberField
      value={price}
      onValueChange={setPrice}
      min={0}
      step={0.01}
      precision={2}
      label="Price ($)"
    />
  );
}

Features

role='spinbutton' with aria-valuemin, aria-valuemax, aria-valuenow
Increment/decrement stepper buttons
Min, max, and step constraints
Decimal precision control
Keyboard: Arrow Up/Down to increment/decrement
Screen reader announcements for value changes

Props

NumberField component props
Prop	Type	Default	Description
`value`	`number`	-	Controlled value
`onValueChange`	`(value: number) => void`	-	Called when value changes
`min`	`number`	-	Minimum value
`max`	`number`	-	Maximum value
`step`	`number`	`1`	Step increment
`precision`	`number`	-	Number of decimal places
`disabled`	`boolean`	`false`	Disables the field
`label`	`string`	-	Label text

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for NumberField
Key	Action
`ArrowUp`	Increments the value by one step
`ArrowDown`	Decrements the value by one step
`Home`	Sets value to minimum
`End`	Sets value to maximum