---
title: Searchbar
description: A search field with a leading magnifier and clear control.
---
import Source from './_generated/searchbar.mdx';

A search input. iOS renders a rounded gray field with a Cancel button that expands on focus; Material renders a full-width pill on a high tonal surface. A clear (×) button appears while the field has a value, and pressing Enter fires the search event.

<DemoFrame component="searchbar" height={480} />

## Installation

```bash
npx touchcn add searchbar
```

## Usage

<CodeGroup>

```html Angular
<tcn-searchbar [(value)]="query" placeholder="Search" (search)="onSearch($event)" />
```

```tsx React
import { TcnSearchbar } from '@/components/ui/searchbar';

<TcnSearchbar value={query} onValueChange={setQuery} placeholder="Search" onSearch={onSearch} />
```

```vue Vue
<script setup lang="ts">
import { TcnSearchbar } from '@/components/ui/searchbar';
</script>

<template>
  <TcnSearchbar v-model="query" placeholder="Search" @search="onSearch" />
</template>
```

</CodeGroup>

## Props

| Prop            | Type                      | Default     | Description                              |
| --------------- | ------------------------- | ----------- | ---------------------------------------- |
| `value`         | `string`                  | `''`        | Field value (two-way on Angular).        |
| `onValueChange` | `(value: string) => void` | —           | Value callback (React).                  |
| `placeholder`   | `string`                  | `'Search'`  | Placeholder text.                        |
| `cancelLabel`   | `string`                  | `'Cancel'`  | Label of the iOS Cancel button.          |
| `search` / `onSearch` | `(value: string) => void` | —     | Fired when Enter is pressed.             |

<Source />