InputNumber

Needs review
WCAG 2.2 evidence
RTL

Number input with stepper buttons: label, a 40 px box with Decrease and Increase buttons around the value and its unit, helper text and an inline error. Built on React Aria NumberField: Arrow Up / Down and Page Up / Down step by step, Home / End jump to minValue / maxValue, typed text is parsed in the user's locale (decimal and grouping separators, native digits) and formatted on blur, the buttons are named "Increase / Decrease <label>" (translated) and repeat while held, and the new value is announced (WCAG 2.1.1, 4.1.2, 4.1.3). Errors show an icon and text (1.4.1, 3.3.1). The stepper buttons are not in the Tab order; the keyboard uses the arrow keys instead. Consumer duties: label, helper and error wording; minValue, maxValue, step and formatOptions that match the data. Use Input for identifiers that only look numeric (phone, IBAN, national ID).

import { InputNumber } from "@nexera-ui/react";

Loading example…

6
examples: 32
props: 5
live controls: 1
platform: 13
WCAG criteria: 0
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

description

isDisabledfalse

isReadOnlyfalse

isRequiredfalse

isInvalidfalse

Generated code

import { InputNumber } from "@nexera-ui/react";

<InputNumber />

Examples 5

The same examples as Storybook, rendered live. Open Code to copy one.

States

Semantic states: isDisabled, isInvalid + errorMessage, read-only and at the maximum.

Loading example…

app.tsx

import { InputNumber } from "@nexera-ui/react";

export function States() {
  return (
    <div className="flex flex-col gap-6">
      <InputNumber
        description="Half days allowed, up to 30."
        suffix="days"
        defaultValue={3}
        minValue={0.5}
        maxValue={30}
        step={0.5}
        label="Disabled"
        isDisabled
      />
      <InputNumber
        label="Error"
        suffix="days"
        defaultValue={40}
        isInvalid
        errorMessage="Enter 30 days or fewer."
      />
      <InputNumber
        description="Half days allowed, up to 30."
        suffix="days"
        defaultValue={3}
        minValue={0.5}
        maxValue={30}
        step={0.5}
        label="Read-only"
        isReadOnly
      />
      <InputNumber
        description="Half days allowed, up to 30."
        suffix="days"
        minValue={0.5}
        maxValue={30}
        step={0.5}
        label="At the maximum (Increase is disabled)"
        defaultValue={30}
      />
    </div>
  );
}

Formatting

formatOptions format the value in the user's locale (currency, percent, units); typed text is parsed the same way.

Loading example…

app.tsx

import { I18nProvider } from "react-aria-components";
import { InputNumber } from "@nexera-ui/react";

export function Formatting() {
  return (
    <div className="flex flex-col gap-6">
      <InputNumber
        label="Monthly allowance"
        defaultValue={1250}
        step={50}
        formatOptions={{ style: "currency", currency: "PKR" }}
      />
      <InputNumber
        label="Bonus share"
        defaultValue={0.15}
        step={0.01}
        formatOptions={{ style: "percent" }}
      />
      <I18nProvider locale="de-DE">
        <InputNumber
          label="Betrag"
          description="Komma als Dezimaltrennzeichen."
          defaultValue={1234.5}
        />
      </I18nProvider>
    </div>
  );
}

Validation on submit

Validation on submit: isRequired, minValue and maxValue are checked when the form is sent; the error has an icon.

Loading example…

app.tsx

import { Form } from "react-aria-components";
import { Button, InputNumber } from "@nexera-ui/react";

export function ValidationOnSubmit() {
  return (
    <Form
      className="flex flex-col gap-6"
      onSubmit={(event) => {
        event.preventDefault();
      }}
    >
      <InputNumber
        label="Leave days"
        name="days"
        suffix="days"
        isRequired
        minValue={0.5}
        maxValue={30}
        step={0.5}
        errorMessage={(validation) =>
          validation.validationDetails.valueMissing
            ? "Enter the number of days."
            : "Enter between 0.5 and 30 days."
        }
      />
      <Button type="submit" className="self-start">
        Request leave
      </Button>
    </Form>
  );
}

Long label

Long labels and helper texts wrap.

Loading example…

app.tsx

import { InputNumber } from "@nexera-ui/react";

export function LongLabel() {
  return (
    <div className="max-w-[12rem]">
      <InputNumber
        suffix="days"
        defaultValue={3}
        minValue={0.5}
        maxValue={30}
        step={0.5}
        label="Number of working days you will be away, including half days"
        description="Weekends and public holidays in your location are not counted."
      />
    </div>
  );
}

Right to left

Right-to-left with Arabic-Indic digits (ar-EG): Decrease moves to the right edge, the unit to the left of the value.

Loading example…

app.tsx

import { I18nProvider } from "react-aria-components";
import { InputNumber } from "@nexera-ui/react";

export function RightToLeft() {
  return (
    <I18nProvider locale="ar-EG">
      <InputNumber
        label="أيام الإجازة"
        suffix="أيام"
        description="يسمح بأنصاف الأيام، حتى ٣٠."
        defaultValue={3}
        minValue={0.5}
        maxValue={30}
        step={0.5}
      />
    </I18nProvider>
  );
}

Props 32

Press "Try it" on a card to load that prop into the playground.

descriptionNexera

ReactNode

Helper text under the field, linked with aria-describedby. Shown when provided.

errorMessageNexera

ReactNode | ((validation: ValidationResult) => ReactNode)

Error text under the field, shown with an icon while the field is invalid (isInvalid, or a failed isRequired / validate / minValue / maxValue after submit) and linked with aria-describedby. A function receives React Aria's validation result.

suffixNexera

string

Unit after the value, for example "days". Linked to the input with aria-describedby so the unit is read too. For currencies and percentages prefer formatOptions, which formats them into the value.

autoCompleteNexera

string

Autofill token for the visible input (for example "transaction-amount"). React Aria turns autofill off by default because the text is locale-formatted; set it when the browser can help the user (WCAG 1.3.5, 3.3.7).

inputRefNexera

Ref<HTMLInputElement>

Ref to the native <input> (the root ref points to the field wrapper).

classNameNexera

string

Extra classes for the root, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style of the root.

labelNexera

FieldLabelContent

Visible label, linked to the control by React Aria (WCAG 1.3.1, 3.3.2). Short noun, for example "Work email". Wraps instead of truncating. A placeholder is never a substitute for it. Not set: the field has no visible label. Not set: the field has no visible label of its own.

aria-labelNexera

string

Accessible name when it must differ from the visible label. Prefer the visible label (WCAG 2.5.3). Accessible name. Required when there is no visible label; translate it. Accessible name. Optional when aria-labelledby is set.

aria-labelledbyNexera

string

Id(s) of element(s) that name the field; wins over the visible label. Id(s) of element(s) that name the field; wins over aria-label. Id(s) of visible element(s) that name the field.

validationBehaviorReact Aria

"native" | "aria"

Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.

decrementAriaLabelReact Aria

string

A custom aria-label for the decrement button. If not provided, the localized string "Decrement" is used.

incrementAriaLabelReact Aria

string

A custom aria-label for the increment button. If not provided, the localized string "Increment" is used.

isWheelDisabledReact Aria

boolean

Enables or disables changing the value with scroll.

formatOptionsReact Aria

NumberFormatOptions

Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user.

commitBehaviorReact Aria

"validate" | "snap"

Controls the behavior of the number field when the user blurs the field after editing. 'snap' will clamp the value to the min/max values, and snap to the nearest step value. 'validate' will not clamp the value, and will validate that the value is within the min/max range and on a valid step.

isDisabledReact Aria

boolean

Whether the input is disabled.

isReadOnlyReact Aria

boolean

Whether the input can be selected but not changed by the user.

isRequiredReact Aria

boolean

Whether user input is required on the input before form submission.

isInvalidReact Aria

boolean

Whether the input value is invalid.

validateReact Aria

(value: number) => true | ValidationError | null

A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.

autoFocusReact Aria

boolean

Whether the element should receive focus on render.

valueReact Aria

number

The current value (controlled).

defaultValueReact Aria

number

The default value (uncontrolled).

onChangeReact Aria

(value: number) => void

Handler that is called when the value changes.

minValueReact Aria

number

The smallest value allowed for the input.

maxValueReact Aria

number

The largest value allowed for the input.

stepReact Aria

number

The amount that the input value changes with each increment or decrement "tick".

idReact Aria

string

The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).

aria-describedbyReact Aria

string

Identifies the element (or elements) that describes the object.

nameReact Aria

string

The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).

formReact Aria

string

The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

8 direct · 5 supporting

1.3.1Info and RelationshipsLevel A · tested directly
1.4.1Use of ColorLevel A · tested directly
1.4.10ReflowLevel AA · supporting test
1.4.11Non-text ContrastLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.7Focus VisibleLevel AA · supporting test
2.5.8Target Size (Minimum)Level AA · supporting test
3.3.1Error IdentificationLevel A · tested directly
3.3.2Labels or InstructionsLevel A · tested directly
3.3.7Redundant EntryLevel A · tested directly
3.3.8Accessible Authentication (Minimum)Level AA · tested directly
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-disabled
data-hovered
data-pressed

Usage

<InputNumber className="data-disabled:opacity-90 shadow-sm" />

Used in blocks

No block uses InputNumber yet.

Theme studio

InputNumber

Try every prop. Copy the code.

Examples 5

States

Formatting

Validation on submit

Long label

Right to left

Props 32

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components