Search Field

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/search-field

Composed components

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install react-aria-components @heroicons/react tailwind-merge

Anatomy

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

<SearchField>
  <SearchInput placeholder="Search..." />
</SearchField>

Examples

With label

You can add a label to the search field by using the label prop.

Validation

Add a validation message to the search field by setting the validationMessage prop.

Description

You can add a description to the search field by using the description prop.

Controlled

Like other fields, the search field can be controlled by managing its value through the value prop.

Uncontrolled

Like other fields, the search field can be controlled by managing its value through the defaultValue prop.

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

The SearchField component renders a search input.

SearchInput

The SearchInput component renders the search input control.

See the React Aria for the full API reference.