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.

Shadcn Number Field

View docs

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.

Basic number field

Number filed with buttons on right

Number field with spinner buttons

Number field in form

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.

Searchers often look for "shadcn number field", "react numeric input", or "tailwind spinner input". This page answers those intents with layouts that 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 17 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.

Frequently Asked Questions