Number Field

Copy MarkdownOpen

Example

Features

Number fields can be built with <input type="number">, but the behavior is very inconsistent across browsers and platforms, it supports limited localized formatting options, and it is challenging to style the stepper buttons. NumberField helps achieve accessible number fields that support internationalized formatting options and can be styled as needed.

• Customizable formatting – Support for internationalized number formatting and parsing including decimals, percentages, currency values, and units. Multiple currency formats are supported, including symbol, code, and name in standard or accounting notation.
• International – Support for the Latin, Arabic, Devanagari, Bengali, and Han positional decimal numbering systems in over 30 locales. The numbering system is automatically detected from user input, and input method editors such as Pinyin are supported.
• Validation – Keyboard input is validated as the user types so that only numeric input is accepted, according to the locale and numbering system. Values are automatically rounded and clamped according to configurable decimal, minimum, maximum, and step values. Custom client and server-side validation is also supported.
• Mobile friendly – An appropriate software keyboard is automatically selected based on the allowed values for ease of use.
• Accessible – Follows the spinbutton ARIA pattern, with support for arrow keys, scroll wheel, and stepper buttons to increment and decrement the value. Extensively tested across many devices and assistive technologies to ensure announcements and behaviors are consistent.

Installation

npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motion

npx @libravelui@latest add number-field

Anatomy

import { NumberField, NumberInput } from "@/components/ui/core/number-field";

<NumberField
  defaultValue={0}
  minValue={0}
  maxValue={100}
  step={1}
  formatOptions={{ style: "decimal" }}
  onChange={(value) => console.log("Changed:", value)}
>
  <NumberInput
    indicator={{
      increment: "INCREMENT INDICATOR GOES HERE (OPTIONAL)",
      decrement: "DECREMENT INDICATOR GOES HERE (OPTIONAL)",
    }}
  />
</NumberField>

Another Examples

Format Options

Demonstrates how to apply formatting rules or constraints to the number input field. Use this to control the appearance or structure of the entered value, such as currency or custom number formats.

Indicator

Displays icon buttons as visual indicators within the number input field. Use these to enhance the input's interactivity and guide user behavior, such as showing increment/decrement icons.

With Form

Illustrates how the number input field integrates into a form context, including support for validation, error messages, and form submission handling.

Disabled

Displays the number input field in a disabled state to indicate that user interaction is not allowed. Use this when input should be visible but not editable.

Props

Loading types…