Select

Custom dropdown with grouped options, icon support, built-in search, 5 animations, and full keyboard navigation.

Import

ts 
import Select from '$lib/components/Select.svelte';

Usage

Feed sorting

svelte 
<script lang="ts">
  let value = $state('');
  const options = [
    { value: 'creator',   label: 'Creator'   },
    { value: 'moderator', label: 'Moderator' },
    { value: 'viewer',    label: 'Viewer'    },
    { value: 'admin',     label: 'Admin', disabled: true },
  ];
</script>

<Select bind:value label="Account Type" {options} placeholder="Select..." />

Animations

5 opening animations — set with animation prop.

Feed sorting

svelte 
<Select options={roles} animation="slide"   label="Slide (default)" />
<Select options={roles} animation="scale"   label="Scale" />
<Select options={roles} animation="elastic" label="Elastic" />
<Select options={roles} animation="fade"    label="Fade" />
<Select options={roles} animation="flip"    label="Flip" />

Searchable

Add searchable for a built-in filter field inside the dropdown.

svelte 
<Select
  bind:value
  label="Country"
  options={countries}
  searchable
  placeholder="Search countries..."
/>

Grouped Options with Icons

Pass an array of OptionGroup objects and add an icon string to each option.

svelte 
const categories = [
  {
    group: 'Entertainment',
    options: [
      { value: 'music',  label: 'Music',  icon: '🎵' },
      { value: 'gaming', label: 'Gaming', icon: '🎮' },
    ],
  },
  {
    group: 'Knowledge',
    options: [
      { value: 'science', label: 'Science', icon: '🔬' },
    ],
  },
];

<Select bind:value label="Category" options={categories} placeholder="Select category..." />

States

Error and disabled states.

Please select a role.

svelte 
<!-- Error state -->
<Select label="Role" {options} value="" error="Please select a role." />

<!-- Disabled state -->
<Select label="Language" {options} value="tr" disabled />

Use Case — Profile Settings

Real-world form example.

Profile Settings

API Reference

Option: { value, label, icon?, disabled? } — OptionGroup: { group, options: Option[] }

PropTypeDefaultDescription
value string''Bindable selected value.
options *Option[] | OptionGroup[]—Flat option list or grouped options.
label stringundefinedField label rendered above the control.
placeholder stringundefinedPlaceholder text when no value is selected.
hint stringundefinedHelper text shown below the control.
error stringundefinedError message; puts the control in error state.
disabled booleanfalseDisables the select.
searchable booleanfalseShows a search field inside the dropdown.
animation 'slide'|'scale'|'elastic'|'fade'|'flip''slide'Dropdown opening animation.
class string''Additional CSS classes for the root element.