<SearchField aria-label="Search">
<Input />
</SearchField>pnpm dlx shadcn@latest add @dotui/search-fieldUse SearchField to allow users to enter and clear a search query.
import { SearchField } from "@/components/ui/search-field";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/field";<SearchField>
<Label>Search</Label>
<Input />
</SearchField>Use the controls below to experiment with different search field props and see the live preview and code update.
A search field allows a user to enter and clear a search query.
| Prop | Type | Default | |
|---|---|---|---|
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
Last updated on 12/21/2025
Bringing singularity to the web.
Built with passion by @mehdibha.
<Dynamic(SearchField)>
<Dynamic(Label)>Search</Dynamic(Label)>
<Dynamic(Input) placeholder="Search..." />
</Dynamic(SearchField)>