token-select-dropdown.mdx

{/* import { TokenSelectDropdown } from '../../../../src/token'; */}
import { TokenSelectDropdown } from '@coinbase/onchainkit/token';
import TokenSelectorContainer from '../../components/TokenSelectorContainer.tsx';
import App from '../../components/App';

# `<TokenSelectDropdown />`

The `TokenSelectDropdown` component is a dropdown component that selects a token in a given list of tokens.

## Usage

```tsx
<TokenSelectDropdown // [!code focus]
  token={token} // [!code focus]
  setToken={setToken} // [!code focus]
  options={[
    // [!code focus]
    {
      name: 'Ethereum',
      address: '',
      symbol: 'ETH',
      decimals: 18,
      image: 'https://wallet-api-production.s3.amazonaws.com/uploads/tokens/eth_288.png',
      chainId: 8453,
    },
    {
      name: 'USDC',
      address: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
      symbol: 'USDC',
      decimals: 6,
      image:
        'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/44/2b/442b80bd16af0c0d9b22e03a16753823fe826e5bfd457292b55fa0ba8c1ba213-ZWUzYjJmZGUtMDYxNy00NDcyLTg0NjQtMWI4OGEwYjBiODE2',
      chainId: 8453,
    },
    {
      name: 'Dai',
      address: '0x50c5725949a6f0c72e6c4a641f24049a917db0cb',
      symbol: 'DAI',
      decimals: 18,
      image:
        'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/d0/d7/d0d7784975771dbbac9a22c8c0c12928cc6f658cbcf2bbbf7c909f0fa2426dec-NmU4ZWViMDItOTQyYy00Yjk5LTkzODUtNGJlZmJiMTUxOTgy',
      chainId: 8453,
    },
  ]} // [!code focus]
/> // [!code focus]
```

<App>
  <TokenSelectorContainer>
    {(token, setToken) => (
      <TokenSelectDropdown
        token={token}
        setToken={setToken}
        options={[
          {
            name: 'Ethereum',
            address: '',
            symbol: 'ETH',
            decimals: 18,
            image: 'https://wallet-api-production.s3.amazonaws.com/uploads/tokens/eth_288.png',
            chainId: 8453,
          },
          {
            name: 'USDC',
            address: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
            symbol: 'USDC',
            decimals: 6,
            image:
              'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/44/2b/442b80bd16af0c0d9b22e03a16753823fe826e5bfd457292b55fa0ba8c1ba213-ZWUzYjJmZGUtMDYxNy00NDcyLTg0NjQtMWI4OGEwYjBiODE2',
            chainId: 8453,
          },
          {
            name: 'Dai',
            address: '0x50c5725949a6f0c72e6c4a641f24049a917db0cb',
            symbol: 'DAI',
            decimals: 18,
            image:
              'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/d0/d7/d0d7784975771dbbac9a22c8c0c12928cc6f658cbcf2bbbf7c909f0fa2426dec-NmU4ZWViMDItOTQyYy00Yjk5LTkzODUtNGJlZmJiMTUxOTgy',
            chainId: 8453,
          },
        ]}
      />
    )}
  </TokenSelectorContainer>
</App>

## Props

[`TokenSelectDropdownReact`](/token/types#tokenselectdropdownreact)

## CSS

```css
.ock-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db #ffffff;
}
```