---
title: Search
description: A searchable list screen composed from touchcn components.
---
import Source from './_generated/search.mdx';

A complete search screen: a live-filtering searchbar, a row of tappable recent
searches, a grouped list of results (avatar, name and handle), pull-to-refresh,
infinite scroll, loading skeletons and a no-results empty state. The sample data
and timers stand in for a real API — replace them and emit `itemTap` into your
navigation.

<DemoFrame component="blocks-search" height={700} />

## Installation

```bash
npx touchcn add search
```

This also adds the components the block composes:

`avatar` · `button` · `chip` · `infinite-scroll` · `list` · `navbar` · `page` · `pull-to-refresh` · `searchbar` · `skeleton`

## Usage

<CodeGroup>

```html Angular
<tcn-search-block (itemTap)="openResult($event)" />
```

```tsx React
import { TcnSearchBlock } from '@/components/blocks/search';

<TcnSearchBlock onItemTap={(item) => openResult(item)} />
```

```vue Vue
<script setup lang="ts">
import { TcnSearchBlock } from '@/components/blocks/search';
</script>

<template>
  <TcnSearchBlock @item-tap="(item) => openResult(item)" />
</template>
```

</CodeGroup>

`itemTap` fires with the tapped result. The block simulates fetching, refreshing
and paging with local timers so it works standalone — swap the `makeItems`
generator and the `setTimeout` delays for your data source, and drive `loading`
and the exhausted flag from your own request state.

Set `showBack` to render a back control in the navbar's leading slot; it emits
`back` (Angular) / `onBack` (React) when tapped — wire it to your router.

<Source />