Select

Custom dropdown select with keyboard navigation and accessibility.

uiforminteractive

Installation

Copy the component file into your project's src/lib/components/ directory.

templates/Select.svelte

Usage

<script>
  import Select from '$lib/components/Select.svelte';

  let country = $state('');
  let theme = $state('dark');
  let priority = $state('');
</script>

<!-- Basic select -->
<Select
  bind:value={country}
  label="Country"
  placeholder="Select a country"
  options={[
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' },
    { value: 'ca', label: 'Canada' },
    { value: 'au', label: 'Australia' }
  ]}
/>

<!-- Select with default value -->
<Select
  bind:value={theme}
  label="Theme"
  options={[
    { value: 'light', label: 'Light' },
    { value: 'dark', label: 'Dark' },
    { value: 'auto', label: 'Auto' }
  ]}
/>

<!-- Select with helper text -->
<Select
  bind:value={priority}
  label="Priority"
  placeholder="Select priority level"
  helperText="Choose the urgency level for this task"
  options={[
    { value: 'low', label: 'Low' },
    { value: 'medium', label: 'Medium' },
    { value: 'high', label: 'High' },
    { value: 'urgent', label: 'Urgent' }
  ]}
/>

<!-- Select with disabled option -->
<Select
  label="Plan"
  placeholder="Choose a plan"
  options={[
    { value: 'free', label: 'Free' },
    { value: 'pro', label: 'Pro' },
    { value: 'enterprise', label: 'Enterprise', disabled: true }
  ]}
/>

<!-- Select with error and required -->
<Select
  bind:value={country}
  label="Country"
  placeholder="Select your country"
  required
  error={country === '' ? 'Country is required' : ''}
  options={[
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' },
    { value: 'ca', label: 'Canada' }
  ]}
/>

Props

Prop	Type	Default	Description
value	string \| number	''	Selected value (bindable)
options	Array<{value: string \| number, label: string, disabled?: boolean}>	[]	Array of options to display in the select
label	string	''	Label text displayed above the select
placeholder	string	'Select an option'	Placeholder text shown when no value is selected
disabled	boolean	false	Whether the select is disabled
required	boolean	false	Whether the select is required (adds asterisk to label)
error	string	''	Error message to display below select
helperText	string	''	Helper text displayed below select when no error
id	string	''	Select id attribute (auto-generated if not provided)
name	string	''	Select name attribute for form submission
class	string	''	Additional CSS classes for the select button

Files

Select.svelte