Search Field

A search field allows a user to enter and clear a search query with built-in keyboard navigation.

import { SearchField } from "@/components/ui/search-field"

export function SearchFieldDemo() {
  return (
    <div className="grid w-full max-w-md gap-4">
      <SearchField label="Search" placeholder="Search products..." />
    </div>
  )
}

Installation

CLI

Manual


pnpm
npm
yarn
bun
pnpm dlx shadcn@latest add search-field

Usage

import { SearchField } from "@/components/ui/search-field"

<SearchField
  label="Search"
  placeholder="Search products..."
/>

API Reference

SearchField

The SearchField component extends the React Aria SearchField component with consistent styling and built-in label, description, and error message support.

Prop	Type	Default	Description
`label`	`string`	-	Label text for the search field
`description`	`string`	-	Helper text displayed below the label
`errorMessage`	`string \| ((validation: ValidationResult) => string)`	-	Error message for validation failures
`placeholder`	`string`	`"Search..."`	Placeholder text
`defaultValue`	`string`	-	Default value (uncontrolled)
`value`	`string`	-	Current value (controlled)
`onChange`	`(value: string) => void`	-	Callback when value changes
`onSubmit`	`(value: string) => void`	-	Callback when Enter key is pressed
`onClear`	`() => void`	-	Callback when clear button is pressed
`isDisabled`	`boolean`	`false`	Whether the search field is disabled
`isRequired`	`boolean`	`false`	Whether the search field is required
`isReadOnly`	`boolean`	`false`	Whether the search field is read-only

Apart from the props above, the SearchField component also supports all props from the react-aria-components SearchField component. See the React Aria documentation for more details.

Features

Accessible - Built on React Aria Components with full keyboard navigation and screen reader support
Clearable - Automatically shows a clear button when text is entered
Keyboard Navigation - Press Enter to submit, Escape to clear
Validation - Built-in validation with custom error messages
Customizable - Full control over styling and behavior

Keyboard Interactions

Key	Description
`Enter`	Triggers the `onSubmit` event with the current value
`Escape`	Clears the search field and triggers `onClear`

Input - For standard text input
Field - For custom form field composition
Input Group - For adding additional context to inputs

Resizable Select

On This Page

Installation Usage API Reference SearchField Features Keyboard Interactions Related