Browse components

Number Field

Numeric stepper with increment and decrement controls.

Install

npx shadcn@latest add https://ui.anuragroy.dev/r/number-field.json

Preview

Loading preview…

Installation

Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.

Terminal

npx shadcn@latest add https://ui.anuragroy.dev/r/number-field.json

GitHub fallback if the website is down:

Terminal

npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/number-field.json

Usage

Import paths follow your components.json aliases. After install, the default path is @/components/ui/number-field.

Import

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

example.tsx

import {  NumberField,  NumberFieldDecrement,  NumberFieldGroup,  NumberFieldIncrement,  NumberFieldInput,} from "@/components/ui/number-field"export function Example() {  return (    <NumberField defaultValue={1} min={0} max={99}>      <NumberFieldGroup>        <NumberFieldDecrement />        <NumberFieldInput />        <NumberFieldIncrement />      </NumberFieldGroup>    </NumberField>  )}

API Reference

NumberField

Base UI NumberField root. Supports `min`, `max`, `step`, `value`, and `defaultValue`.

Prop	Type	Default
min	number	—
max	number	—
step	number	—

Notes

`NumberFieldScrubArea` is also exported for drag-to-change interactions.