Komponents
Components

Components

NumberField

Localized number input with accessible increment and decrement steppers.

newfree
pnpm add @komponents/uiCanonical TypeScript source · tree-shakeable subpaths

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

Billed per active workspace seat.

Usage

Snippet
import { NumberField } from "@komponents/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

TextArea

Multiline labeled field with description and validation messaging.

SearchField

Search input with clear control and Escape-to-clear behavior.

On this page

UsageVariantsStatesAccessibility