Searchable Select

Forms

Selection

Dropdown with live search filtering and visual selection state for quick access to large lists. Perfect for framework selection, user pickers, and filtered dropdowns.

Preview

Type to filter options

Props

SearchableSelect component API reference

Prop	Type	Default	Description
`items`	`SelectItem[]`	—	Available items to select from
`defaultValue`	`string`	—	Default selected item ID
`value`	`string`	—	Controlled selected value
`onValueChange`	`(id: string) => void`	—	Called when selection changes
`placeholder`	`string`	`'Search...'`	Placeholder text for search input
`emptyMessage`	`string`	`'No results found'`	Empty state message
`className`	`string`	—	Additional CSS classes

SelectItem Type

interface SelectItem {
  id: string
  label: string
  icon?: LucideIcon
}

Usage

Import and implementation example

import { SearchableSelect } from '@/components/ui/searchable-select'
import { Code, Globe, Zap } from 'lucide-react'

const frameworks = [
  { id: 'react', label: 'React', icon: Code },
  { id: 'vue', label: 'Vue.js', icon: Code },
  { id: 'nextjs', label: 'Next.js', icon: Globe },
  { id: 'astro', label: 'Astro', icon: Zap },
]

export default function Example() {
  const [value, setValue] = useState('react')

  return (
    <>
      {/* Basic searchable select */}
      <SearchableSelect
        items={frameworks}
        defaultValue="react"
        placeholder="Search framework..."
        emptyMessage="No frameworks found"
        onValueChange={(id) => console.log('Selected:', id)}
      />

      {/* Controlled mode */}
      <SearchableSelect
        items={frameworks}
        value={value}
        onValueChange={setValue}
        placeholder="Choose a framework..."
      />
    </>
  )
}

Features

Built-in functionality

Live search filter: Real-time filtering as you type
Icon support: Optional icons for each option
Visual selection state: Clear highlighting for selected items
Check marks: Visual confirmation of selection
Empty state: Friendly message when no results found
Keyboard navigation: Full keyboard support
Controlled mode: Support for controlled and uncontrolled usage
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Uses Popover with proper ARIA attributesSearch input is properly labeledOptions have role="option"Selected state uses aria-selected

Keyboard Navigation

Key	Action
`Tab`	Focus the trigger button
`Enter/Space`	Open dropdown
`Arrow Up/Down`	Navigate options
`Enter`	Select highlighted option
`Escape`	Close dropdown

Notes

Search input auto-focuses on open
Check icon indicates selected item
Empty state is announced to screen readers
Dropdown closes on selection

Related Components

Select Combobox Multi-Select Dropdown