Search Field

A search field allows a user to enter and clear a search query.

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

Installation

npm

pnpm

yarn

bun

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.

label

placeholder

isDisabled

isReadOnly

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

Examples

SearchEnter your search query

SearchPlease fill out this field.

mirrored search text: Is dotUI the next-gen ui lib?

API Reference

A search field allows a user to enter and clear a search query.

Prop	Type	Default
	`ReactNode \| function`	`—`
	`union`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`DOMRenderFunction<"div", SearchFieldRenderProps>`	`—`
	`union`	`'search'`

	`string`	`—`
	`string`	`—`
	`function`	`—`

Last updated on 5/22/2026