Shadcn Number Field Form Validation

Number field in form. Built by composing Alert, Button, Field, Number Field. Uses @hookform/resolvers, react-hook-form, sonner alongside the shadcn primitives. A free, open source shadcn number field example you can install with npx shadcn@latest add @reui/c-number-field-6 and edit as your own code.

Number field in form

For AI Agents

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

Best for: A React Hook Form Controller binding the amount, with zod bounds, an error message and Cancel and Submit buttons

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

A standalone control outside any schema or submit flow: use the Number Field Default Size example
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

onSubmit only raises a toast with data.amount and resets the form; send the amount to your API there and mount the Sonner toaster
FormSchema requires 10 to 100 while NumberField allows 0 to 100 and starts at 5; align min and defaultValues with the schema
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

Sonner v2: API reference, docs
React Hook Form v7: API reference, docs
React Hook Form resolvers v5: API reference, docs
Zod v4: API reference, docs

Markdownhttps://reui.io/components/number-field/c-number-field-6.md

MCPget_example("c-number-field-6")

Installnpx shadcn@latest add @reui/c-number-field-6

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Number Field Form Validation

Dependencies

@hookform/resolvers
react-hook-form
sonner
zod

About Shadcn Number Field Form Validation

What You Can Build With Shadcn Number Field Form Validation

Composes Alert, Button, Field, Number Field, so it drops into any project already using those components.
Install it with the shadcn CLI: npx shadcn@latest add @reui/c-number-field-6
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Number Field Examples

Default Size Basic number field
Small Size Basic number field
Large Size Basic number field
Buttons on Right Number field with buttons on right
Spinner Buttons Number field with spinner buttons

Related Shadcn Component Categories

Pagination
Open-source shadcn pagination components for table pagination, search results, and content archives.
Phone Input
Open-source shadcn phone input components for international signup, contact forms, and country codes.
Popover
Open-source shadcn popover components for inline settings, contextual actions, and lightweight overlays.
Progress
Open-source shadcn progress components for upload progress, goal tracking, and setup steps.
Questionnaire
Open-source shadcn questionnaire components for onboarding surveys, multi-step question flows, and guided feedback.
Radio Group
Open-source shadcn radio group components for single-choice forms, plan selection, and settings preferences.

Frequently Asked Questions

When should I use Shadcn Number Field Form Validation?

Use it for a React Hook Form Controller binding the amount, with zod bounds, an error message and Cancel and Submit buttons.

Shadcn Number Field as a whole fits:

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

For a standalone control outside any schema or submit flow, use the Number Field Default Size example. For free text such as a name, an email or an order ID, with nothing to step, use the Input component. For a full plans comparison with tier prices and a seat count to adjust, use the Pricing blocks. For a record entry page with many controls, such as a product with price and stock, use the Form blocks.

How do I install Shadcn Number Field Form Validation?

Run npx shadcn@latest add @reui/c-number-field-6. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Number Field Form Validation free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Number Field Form Validation use?

It composes Alert, Button, Field, Number Field. The shadcn CLI installs those alongside the example.

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.