Trading
Searchable Select
Single-select dropdown with built-in fuzzy search and automatic virtualization for large option lists (over 100 items). Ideal for picking exchanges, symbols, or any long list.
Preview
Source
Copy this file to components/trading/searchable-select.tsx
tsx
'use client'
import * as React from 'react'
import { useState, useRef, useEffect, useMemo } from 'react'
import { useVirtualizer } from '@tanstack/react-virtual'
import { ChevronDown, Search, Loader2 } from 'lucide-react'
import { cn } from '@/lib/utils'
export interface SearchableSelectProps {
value: string
onValueChange: (value: string) => void
options: string[]
placeholder?: string
searchPlaceholder?: string
loading?: boolean
className?: string
disabled?: boolean
optionLabels?: Record<string, string>
}
// Single-select dropdown with built-in search and virtualization (>100 options).
// See components/trading/searchable-select.tsx for the full implementation.Props
| Prop | Type |
|---|---|
| value* | string |
| onValueChange* | (value: string) => void |
| options* | string[] |
| optionLabels | Record<string, string> |
| placeholder | string |
| searchPlaceholder | string |
| loading | boolean |
| disabled | boolean |
| className | string |