---
title: "Search field"
description: "A search box with a clear button; Escape clears it. debounceMs waits for a pause in typing before searching, and clearing searches at once."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Search field

## In a toolbar

Without a label, the placeholder names the box.

```tsx
import { SearchField } from '@arbol-ai/ui';

<SearchField className="max-w-xs" placeholder="Search contacts" />
```

## Debounced

The list searches 300 ms after the last keystroke.

```tsx
import { useState } from 'react';
import { SearchField } from '@arbol-ai/ui';

const DebouncedExample = () => {
  const [search, setSearch] = useState('');
  return (
    <div className="grid max-w-xs gap-2">
      <SearchField debounceMs={300} onChange={setSearch} placeholder="Search campaigns" value={search} />
      <p className="text-muted-foreground text-sm">
        Searching for: <output>{search === '' ? '—' : search}</output>
      </p>
    </div>
  );
};

<DebouncedExample />
```

## Labelled

```tsx
import { SearchField } from '@arbol-ai/ui';

<SearchField className="max-w-xs" description="By name, phone or document." label="Find a patient" />
```

## Source

The examples above are [`src/components/search-field/search-field.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/search-field/search-field.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/forms/search-field/index.mdx