Search Field

<SearchField aria-label="Search">
  <Input />
</SearchField>

Installation

npx shadcn@latest add @dotui/search-field

Usage

Use 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>

Playground

Use the controls below to experiment with different search field props and see the live preview and code update.

<SearchField>
  <Label>Search</Label>
  <Input placeholder="Search..." />
</SearchField>

API Reference