Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form examples · Basic Forms

Search Input Form for React

A search form with one search input that can't be submitted empty.

Framework
UI library

An empty search wastes a request and returns nothing useful. This form requires at least one character with Zod and uses type="search", which gives the field the browser's clear button. A Controller connects the Input to React Hook Form inside a Field, with a FieldDescription and a FieldError for "Please enter a search query." Use it for site search, product filters or documentation lookups.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What counts as an empty search?

query is z.string().min(1, "Please enter a search query."). Any one character passes, a space included. There is no maximum. Add .trim() before .min(1) to reject spaces only.

Why is the input type search?

type="search" tells browsers and assistive tech it's a search field, and many browsers add a clear button. The label is "Search" and the placeholder "Search for anything...".

What does the description say?

FieldDescription reads "Enter keywords to search our database." FieldError is the separate line under it for the empty-query message.

How does the query reach onSubmit?

defaultValues sets query to "". The Controller named query spreads field onto the Input. Search is a type="submit" button, so Enter in the field submits too, and the handler logs the values.

When is the empty-query error shown?

On submit, because mode isn't set. After a failed submit, typing a character clears it, since React Hook Form then checks on each change.

Which libraries does this demo import?

useForm and Controller from React Hook Form, zodResolver from @hookform/resolvers/zod, and z from Zod, plus the Button, Field and Input components.

All 42 form examples