Home
Components
Charts

Getting Started
Introduction
Installation
Client Side Routing
MCP Server
LLMs

Framework Guides
Nextjs
Laravel
Tanstack Start
Vite

Components

Buttons
Button
File Trigger
Toggle
Toggle Group

Charts
Chart

Collections
Accordion
Attachment
Bubble
Collapsible
Context Menu
Dropdown Menu
Grid List
Item
List Box
Message
Table
Tag Group
Tree

Colors
Color

Controls
Command
Kbd
Slider
Switch
Toolbar

Date And Time
Calendar
Date Field
Date Picker
Date Range Picker
Range Calendar
Time Field

Drag And Drop
Drop Zone

Forms
Checkbox
Combobox
Field
Input
Input Group
Input OTP
Number Field
Radio
Search Field
Select
Text Field

Layouts
Container
Navbar
Sidebar

Media
Avatar
Carousel

Navigation
Breadcrumbs
Link
Pagination
Tabs

Overlays
Alert Dialog
Dialog
Drawer
Popover
Sheet
Tooltip

Statuses
Alert
Badge
Empty
Meter
Progress
Skeleton
Sonner

Surfaces
Card
Separator

Search Field

A search field allows a user to enter and clear a search query.

Installation

CLI

Manual

npx shadcn add https://hq-ui.vercel.app/r/nova/search-field

Examples

search-field-demo

Basic

Pending

Read only

Invalid

Disabled

On this page

Installation
Examples

On this page

Installation
Examples