> ## Documentation Index
> Fetch the complete documentation index at: https://base-a060aa97-eb-mini-app-ia-overhaul.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# `<TokenSearch />`

The `<TokenSearch />` is a search component with an optional debounce delay.

If you want to handle debounce delay outside of this component, set `delayMs` to `0`.

## Usage

Use [`getTokens`](/onchainkit/api/get-tokens) and `<TokenSearch />` combined to search the [`Token`](/onchainkit/token/types#token).

```tsx
// @noErrors: 7006 2322 1128 - 'value' implicitly has any type, Type GetTokensResponse is not assignable to type Token[]
import { useCallback } from 'react';
import { base } from 'viem/chains';
// ---cut-before---
import { OnchainKitProvider } from '@coinbase/onchainkit';
import { getTokens } from '@coinbase/onchainkit/api'; // [!code focus]
import { TokenSearch } from '@coinbase/onchainkit/token'; // [!code focus]
import type { Token } from '@coinbase/onchainkit/token'; // [!code focus]

...

// example of async onChange handler
const handleChange = useCallback((value: string) => {
  async function getData(value) {
    const tokens: Token[] = await getTokens({ search: value }); // [!code focus]
    // Do something with tokens here
  }
  getData(value);
}, []);

...

<OnchainKitProvider
  chain={base}
  apiKey="YOUR_API_KEY"
>
  <TokenSearch onChange={handleChange} delayMs={200} />
</OnchainKitProvider>
```

<iframe src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-token-search--default&viewMode=story&dark=true&hero=true" width="100%" height="auto" />

{/* <App>
<TokenSearch onChange={(value) => console.log('Search term:', value)} delayMs={200} />
</App> */}

## Props

[`TokenSearchReact`](/onchainkit/token/types#tokensearchreact)