Search Field

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

<SearchField className="max-w-xs">
  <Label>Search</Label>
  <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>

Anatomy

A SearchField wraps an optional Label, an Input, and optional Description and FieldError. Rendered on its own it supplies a default InputGroup with a search icon and a clear button, so <SearchField><Input /></SearchField> is enough.

import { SearchField } from '@/components/ui/search-field'
import { Label, Description, FieldError } from '@/components/ui/field'
import { Input } from '@/components/ui/input'
;<SearchField>
  <Label />
  <Input />
  <Description />
  <FieldError />
</SearchField>

Value

The value is a string. Use defaultValue for uncontrolled state, or value with onChange to control it.

const [value, setValue] = React.useState('')

<SearchField value={value} onChange={setValue}>
  <Label>Search</Label>
  <Input />
</SearchField>

Submit & clear

onSubmit fires with the current value when the user presses Enter; onClear fires when they press Escape or the clear button, which appears once the field is non-empty.

<SearchField onSubmit={(value) => search(value)} onClear={() => reset()}>
  <Label>Search</Label>
  <Input />
</SearchField>

Examples

Basic Search

Search with Suggestions

Header Search

Search with Filtered Results

Olivia Martin
olivia.martin@email.com
Owner
Jackson Lee
jackson.lee@email.com
Member
Isabella Nguyen
isabella.n@email.com
Member
William Kim
will.kim@email.com
Admin
Sofia Davis
sofia.davis@email.com
Member

API Reference

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

Prop	Type	Default
	`string`	`—`
	`ReactNode \| function`	`—`
	`union`	`—`
	`union`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`string`	`—`
	`union`	`'search'`

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

Last updated on 7/7/2026