Search Field

FreeNew

A search input with a leading icon, a clear button and an Enter-to-search callback.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

value

defaultValue

label


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/search-field.json

import { SearchField } from "@/components/ui/search-field"

<SearchField
  label="Search docs"
  placeholder="Search docs"
  onSearch={(query) => console.log(query)}
/>

Prop	Type	Default	Description
`value`	`string`	-	Controlled query.
`defaultValue`	`string`	`""`	Initial query when uncontrolled.
`onValueChange`	`(value: string) => void`	-	Called when the query changes or is cleared.
`onSearch`	`(value: string) => void`	-	Called when Enter is pressed.
`label`	`string`	`"Search"`	Accessible name of the input.

Other <input> props are passed to the input.

The clear button appears only when there is a query. It clears the value and returns focus to the input.
Calling event.preventDefault() in your own onKeyDown skips onSearch.

Guide and examples


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/search-field.json

import { SearchField } from "@/components/ui/search-field"

<SearchField
  label="Search docs"
  placeholder="Search docs"
  onSearch={(query) => console.log(query)}
/>

Prop	Type	Default	Description
`value`	`string`	-	Controlled query.
`defaultValue`	`string`	`""`	Initial query when uncontrolled.
`onValueChange`	`(value: string) => void`	-	Called when the query changes or is cleared.
`onSearch`	`(value: string) => void`	-	Called when Enter is pressed.
`label`	`string`	`"Search"`	Accessible name of the input.

Other <input> props are passed to the input.

The clear button appears only when there is a query. It clears the value and returns focus to the input.
Calling event.preventDefault() in your own onKeyDown skips onSearch.