Theme:

Select Component

Basic Select

Select

Selected Value

const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' }
];

<Select 
  options={options}
  bind:value={selectedValue}
  placeholder="Choose an option"
/>

With Pre-selected Value

let selectedValue = $state('option2'); // Pre-select option2

<Select 
  options={options}
  bind:value={selectedValue}
  placeholder="Choose an option"
/>

Custom Option Rendering

const fruitOptions = [
  { value: 'apple', label: 'Apple', emoji: '🍎' },
  { value: 'banana', label: 'Banana', emoji: '🍌' },
  { value: 'orange', label: 'Orange', emoji: '🍊' },
  { value: 'grape', label: 'Grape', emoji: '🍇' },
  { value: 'strawberry', label: 'Strawberry', emoji: '🍓' }
];

<Select 
  options={fruitOptions}
  bind:value={selectedFruit}
  placeholder="Choose a fruit"
>
  {#snippet itemSnippet(option)}
    <div class="flex items-center gap-2">
      <span class="text-lg">{option.emoji}</span>
      <span>{option.label}</span>
    </div>
  {/snippet}
</Select>

Multi-Select

Selected Values

Multi-Select with Custom Items

Dropdown stays open for multiple selections

const basicOptions = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' },
  { value: 'option4', label: 'Option 4' }
];

let multiSelectedItems = $state([]);

// Basic Multi-Select
<Select 
  options={basicOptions}
  multiSelect={true}
  bind:value={multiSelectedItems}
  placeholder="Select multiple options"
/>

// Multi-Select with Custom Rendering
<Select 
  options={fruitOptions}
  multiSelect={true}
  bind:value={multiSelectedFruits}
  placeholder="Select multiple fruits"
>
  {#snippet itemSnippet(option, index, isSelected, isFocused)}
    <div class="flex items-center gap-2 px-2 py-1">
      <span class="text-lg">{option.emoji}</span>
      <span class="flex-1">{option.label}</span>
      {#if isSelected}
        <span class="text-sm text-green-600 font-medium">✓</span>
      {/if}
    </div>
  {/snippet}
</Select>

// Key Features:
// • bind:value receives string[] instead of string
// • Input shows "X items selected" for multiple selections
// • Dropdown stays open for continued selection
// • Use Space to toggle items, Escape to close
// • Selected items highlighted with visual indicators

API Integration Example

let selectedValue = $state("");

<Select 
  options={[]}
  bind:value={selectedValue}
  url="/api/countries"
  transform={(data) => data.map(country => ({
    value: country.countryCode,
    label: `${country.countryName} (${country.region})`
  }))}
  placeholder="Select a country..."
/>

// How it works:
// 1. Component mounts and automatically calls /api/countries
// 2. API returns: [{ countryCode: 'US', countryName: 'United States', region: 'North America' }, ...]
// 3. Transform maps each item to Select format: { value: 'US', label: 'United States (North America)' }
// 4. Dropdown stays closed until user clicks (no auto-open for initial data)
// 5. No searchParam needed = static data loading mode

Disabled State

<Select 
  options={options}
  value="option2"
  placeholder="Choose an option"
  disabled
/>

// Features:
// • Input cursor changes to default (no pointer)
// • Dropdown cannot be opened
// • Maintains visual consistency with disabled styling

Features

Key Features:

• Keyboard Navigation: Arrow keys navigate, Space toggles selection, Enter submits form, Escape closes
• Multi-Select Support: Select multiple options with highlighting (dropdown stays open)
• Custom Rendering: Use snippets to customize how options are displayed
• Auto-scroll: Selected option automatically scrolls into view
• Global Management: Only one dropdown can be open at a time
• Accessible: Proper ARIA attributes and keyboard support
• Custom Scrollbar: Styled scrollbar for consistent appearance
• Disabled State: Properly handles disabled state with cursor and interaction changes