Hewn
Components

Components

NumberField

Localized number input with accessible increment and decrement steppers.

newfree

Install

@hewnui/ui · hewnui

Terminal
npm install @hewnui/ui
Terminal
pnpm add @hewnui/ui
Terminal
yarn add @hewnui/ui
Terminal
bun add @hewnui/ui
Terminal
npx hewnui@latest add number-field

Built on React Aria NumberField. Values use tabular numerals and format through Intl.NumberFormat options.

Billed per active workspace seat.

Usage

TSX
import { NumberField } from "@hewnui/ui";

<NumberField label="Quantity" defaultValue={3} minValue={0} />

Variants

outline (default), filled, flushed, and glass.

States

  • Description helper text
  • Invalid + errorMessage
  • Disabled / read-only
  • Min and max bounds

Accessibility

  • Stepper buttons labeled for increment and decrement
  • Arrow keys adjust the value
  • Hit targets are at least 40×40px

API reference

Props for NumberField from @hewnui/ui/number-field. Generated from component types — not hand-written.

Prop

Type

On this page