NumberField

Numeric entry with increment buttons, bounds, locale formatting and scrubbing.

CoreAdvanced Inputs@gaudi/design-system/core/NumberFieldView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { NumberField } from '@gaudi/design-system/core/NumberField';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/number-field-button-layouts.json.

Usage

import { NumberField, NumberFieldGroup, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement } from '@gaudi/design-system/core/NumberField';
<NumberField value={quantity} onValueChange={setQuantity} min={1}>  <NumberFieldGroup><NumberFieldDecrement /><NumberFieldInput aria-label='Quantity' /><NumberFieldIncrement /></NumberFieldGroup></NumberField>

Examples

Button layouts

Storybook

Form validation

Storybook

API

9 props

Accessibility

Compose the input and increment/decrement parts inside NumberField. Base UI preserves spinbutton semantics and keyboard adjustment.

Notes

The text editor inherits InputConfigProvider. Set caretMode="native" or caretMode="smooth" on NumberFieldInput to override the provider. Numeric parsing, formatting, bounds and stepping stay with NumberField.

FieldField composes form label, description, error, and input building blocks.7 examples BannerBanner renders a compact announcement strip.5 examples ToastTransient feedback for completed actions, errors and recoverable background work.4 examples