Neumorphism UI

Number Field

Use NumberField when readers need to type a number or adjust it with increment and decrement buttons.

Preview

Workspace seat count

Start with three seats and allow adjustments within the one-to-eight seat limit.

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

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

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Label NumberField and group NumberFieldInput with decrement and increment controls. Set sensible bounds and name the two adjustment buttons.

"use client";

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

export default function Example() {
  const id = useId();
  return (
    <NumberField id={id} defaultValue={1} min={1} max={10}>
      <label htmlFor={id}>Seats</label>
      <NumberFieldGroup>
        <NumberFieldDecrement aria-label="Decrease seats" />
        <NumberFieldInput />
        <NumberFieldIncrement aria-label="Increase seats" />
      </NumberFieldGroup>
    </NumberField>
  );
}

API Reference

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

ComponentPropTypeDefaultDescription
NumberFieldmin / maxnumber—Set the minimum and maximum bounds.
NumberFieldstepnumber—Increment size for buttons and keyboard input.
NumberFieldlocale / formatstring | Intl.NumberFormatOptions—Configure locale-aware number formatting.

Accessibility

  • 01

    Name each increment/decrement button. Check boundaries and direct text input.

  • 02

    Preserve labels and visible focus when customizing render or className.