Shadcn Number Field

Browse 6 production-ready shadcn number-field components for numeric entry, stepper controls, and quantity selection. Shadcn Number Field is compatible with Radix UI and Base UI form components and is fully aligned with Shadcn Create style options so your previews match your design tokens.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Quantities, amounts and counts stepped up or down by buttons inside a min and max range
Compact numeric settings whose label scrubs the value when dragged sideways
Validated amounts in a React Hook Form form, checked by a zod schema with the error shown below

When not to use

Free text such as a name, an email or an order ID, with nothing to step: use the Input component
A full plans comparison with tier prices and a seat count to adjust: use the Pricing blocks
A record entry page with many controls, such as a product with price and stock: use the Form blocks

Agent notes

onValueChange receives null when the input is cleared, so type a controlled value as a number or null
Set aria-invalid on NumberFieldGroup to turn its border destructive; a shadcn Field marked invalid only recolors text
An outside label must point htmlFor at the id passed to NumberField, which Base UI sets on the input

Third-party API docs

Base UI v1: API reference, docs, llms.txt
Sonner v2: API reference, docs, used by 1 of 6 examples
React Hook Form v7: API reference, docs, used by 1 of 6 examples
React Hook Form resolvers v5: API reference, docs, used by 1 of 6 examples
Zod v4: API reference, docs, used by 1 of 6 examples

Markdownhttps://web.dev.reui.io/components/number-field.md

MCPget_component("number-field")

Installnpx shadcn@latest add @reui/number-field

Full index for agents:llms.txtReUI MCP setup

Shadcn Number Field: Numeric Entry with Spinners

Shadcn Number Field is a numeric input component with increment/decrement buttons (spinners) and keyboard step support. It maintains semantic HTML and accessibility while providing Tailwind styling and Radix compatibility.

It handles numeric-only input, prevents invalid values, and provides visual spinner controls so users can increment or decrement values without typing.

ReUI lists number-field components in product quantity selectors, price filters, and quantity forms so you evaluate spinner placement, button sizing, and validation next to a Shadcn Input or Shadcn Field. The sections below cover what it is, why teams use it, and integration components.

What is Shadcn Number Field?

In form terms, a number field is an input constrained to numeric values. Shadcn Number Field provides spinner buttons for increment/decrement, keyboard shortcuts (up/down arrows), and validation so only valid numbers are entered.

Components here show product quantity selectors, price range filters, and age pickers. They help you decide spinner styling, minimum/maximum values, and step size before implementing numeric entry throughout your app.

Why Use Shadcn Number Field?

Number fields reduce errors by constraining input to numeric values. Spinners let users adjust values without typing. They improve mobile UX where on-screen number keyboards can feel slow. Use them for quantities, prices, ratings, and any numeric choice.

The layouts on this page show number fields in checkout steps, filter panels, and product pages.

Shadcn Number Field Features

Increment/Decrement Spinners. Up and down buttons for adjusting the value without typing, with keyboard support (arrow keys).
Min and Max Constraints. Set valid number ranges so users can't enter out-of-bounds values. Spinners disable at boundaries.
Step Control. Define step size (1, 5, 10) for keyboard and spinner increments, matching your domain (quantities, prices).
Keyboard Shortcuts. Arrow keys increment/decrement; Page Up/Down for larger steps. Full keyboard control without spinners.
Numeric-Only Input. Validation prevents non-numeric characters, decimals (unless allowed), and invalid formats.

ReUI Number Field: In-House Custom Shadcn Component

ReUI Number Field is an in-house component built and maintained by the ReUI team as part of the ReUI open-source library. It is designed to integrate seamlessly into any shadcn/ui project : following the same copy-and-own installation model. The component source lands directly in your repository; you own it, extend it, and style it with your Tailwind CSS tokens. ReUI Number Field is a custom numeric input component built on @base-ui/react NumberField, not available in base shadcn/ui. It provides increment and decrement stepper buttons, min/max/step constraints, and keyboard-controlled value changes with full WAI-ARIA spinbutton semantics. Integrates with react-hook-form and zod for form validation.

The component is available in two API flavors to match your primitive stack: a Radix UI version for teams using Radix-based shadcn primitives, and a Base UI version for teams on @base-ui/react. Both versions share identical visual output and Tailwind CSS styling : only the underlying headless primitive differs. ReUI maintains 22 such in-house components, all available in both Radix and Base UI versions, each with dedicated documentation covering the full component API, usage examples, and prop references.

Pair number fields with Shadcn Field to add labels and descriptions. Use Shadcn Label with htmlFor for proper form association so screen readers understand the field.

Combine number fields with Shadcn Input Group to add currency symbols or unit labels. Use Shadcn Button next to or around the spinner for additional actions like remove or add-to-cart.

Render number fields in Shadcn Card sections for product ordering or Shadcn Dialog for bulk quantity entry. Pair with Shadcn Slider as an alternative for value selection in a range.

Form Blocks in ReUI Pro

The free examples above pair with 12 production ready form blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

Form (12 blocks)Form layouts for settings, profiles, and data entry with validation and grouped fields.

Browse all Application blocks

Frequently Asked Questions

Can I use a number field to input decimal values like prices?

Yes. Most number fields support decimals by default. You can set step to 0.1 or 0.01 to allow smaller increments. For currency, set step to 0.01 to match cents.

How do I set minimum and maximum values on a number field?

Use min and max props. Spinners become disabled when the value reaches the boundary, and validation prevents users from typing out-of-range values.

What is the difference between a number field and a plain input type=number?

Number field adds spinner buttons, keyboard step support, and clear min/max/step props. Plain input type=number offers less control over styling and behavior. Number field is better for intentional numeric entry workflows.

Is Shadcn Number Field accessible for all users?

Yes. Keyboard arrow keys, spinner buttons, and text input all work. Pair with a Shadcn Label and Shadcn Field for proper form association. Test focus states and validation announcements with screen readers.

Can I integrate number field with a form library like React Hook Form?

Yes. Treat it like a controlled input: wire value and onChange to your form state. Libraries like React Hook Form and TanStack Form work seamlessly with number fields for validation and error display.

How do ReUI number-field components differ from a minimal example?

ReUI shows number fields in checkout flows, filter panels, and quantity selectors. You see spinner styling, validation states, and integration with Shadcn Field, Shadcn Button, and form contexts together.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.