Search Field
Installation
Add the component with the CLI.
npx shadcn@latest add @intentui/search-field
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
Manual installation
Install the dependencies, then copy the component source into your project.
npm install react-aria-components @heroicons/react cn
Anatomy
import { SearchField, SearchInput } from "@/components/ui/search-field"
<SearchField>
<SearchInput placeholder="Search..." />
</SearchField>Examples
With label
Add a Label inside SearchField to provide a visible label.
Validation
Set isRequired and include FieldError to display a validation message when the form is submitted without a value.
Description
Add Description inside SearchField to provide supporting text.
Controlled
Pass value and update it with onChange to control the search query.
Uncontrolled
Use defaultValue to set the initial value of an uncontrolled field.
Readonly
When the search field is set to readonly, it cannot be edited.
Disabled
Disable the search field by using the isDisabled prop.
Component API
SearchField
SearchField extends the React Aria Components <SearchField> component.
classNamestringSearchInput
SearchInput extends the React Aria Components <Input> component.
classNamestringSee the React Aria for the full API reference.
