Forms & selection@neumorphism-ui/number-field

Number Field

Numeric entry with bounds, steps, and locale-aware formatting. Name each increment/decrement button. Check boundaries and direct text input.

@neumorphism-ui/number-field

Registry JSON

Preview

Seats

Installation

npx shadcn@latest add @neumorphism-ui/number-field

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

"use client";

import * as React from "react";
import { NumberField, NumberFieldGroup, NumberFieldInput, NumberFieldIncrement, NumberFieldDecrement } from "@/components/ui/number-field";

Example

export default function Example() {
  const id = React.useId();
  return (<NumberField id={id} defaultValue={3} min={1} max={8}><label htmlFor={id} className="text-sm font-semibold">{"Seats"}</label><NumberFieldGroup><NumberFieldDecrement aria-label={"Decrease seats"} /><NumberFieldInput /><NumberFieldIncrement aria-label={"Increase seats"} /></NumberFieldGroup></NumberField>);
}

API Reference

Component	Prop	Type	Default	Description
`NumberField`	`min / max`	`number`	`—`	Set the minimum and maximum bounds.
`NumberField`	`step`	`number`	`—`	Increment size for buttons and keyboard input.
`NumberField`	`locale / format`	`string \| Intl.NumberFormatOptions`	`—`	Configure locale-aware number formatting.