Search Field

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

On this page

Props

label

placeholder

isDisabled

isReadOnly

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

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
	`string`	`—`
	`ReactNode \| function`	`—`
	`union`	`—`
	`union`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`string`	`—`
	`union`	`'search'`

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

Last updated on 6/16/2026