Select

A dropdown component that allows users to select one or more options from a list.

Anatomy 

<script>
  import {
    Select,
    SelectRoot,
    SelectTrigger,
    SelectValue,
    SelectAvatarValue,
    SelectContent,
    SelectItem,
    SelectItemGroup,
    SelectLabel,
    SelectClearTrigger,
    SelectIndicator,
  } from "@saas-ui/svelte/components/select";
</script>

<Select.Root items={frameworks}>
  <Select.Label>Framework</Select.Label>
  <Select.Trigger>
    <Select.Value placeholder="Select a framework" />
  </Select.Trigger>
  <Select.Content>
    {#each frameworks as item}
      <Select.Item {item}>
        {item.label}
        <Select.Indicator />
      </Select.Item>
    {/each}
  </Select.Content>
</Select.Root>

Examples

Avatar Select Accessibility

Use Select.AvatarValue to display avatars in the selected value.

Basic Accessibility

Basic select with default styling.

Clear Trigger Accessibility

Use clearable prop on trigger to allow clearing the selection.

Colours Accessibility

Use the colour prop to change the colour of the select.

Disabled Accessibility

Use the disabled prop to disable the select.

In Popover Accessibility

Select can be used inside a Popover component.

Invalid Accessibility

Wrap in Field.Root with invalid prop to show error state.

Option Group Accessibility

Group options using Select.ItemGroup for better organization.

Overflow Accessibility

Long content is automatically scrollable.

Positioning Accessibility

Use the positioning prop to control dropdown placement.

Sizes Accessibility

Use the size prop to change the size of the select.

Variants Accessibility

Use the variant prop to change the visual style of the select.

Props

Select.Root

The root container component for the select.

Prop Type Default Description
children Snippet - The select content.
collection ListCollection<T> - The collection of items to display.
id string - The unique identifier for the select. If not provided, a unique ID will be auto-generated.
size "xs" | "sm" | "md" | "lg" "md" The size of the select.
variant "outline" | "subtle" "outline" The visual variant of the select trigger.
colour ColourName "indigo" The colour palette for highlighted items.
class string - Additional CSS classes to apply.

Select.Trigger

The trigger button that opens the select dropdown.

Prop Type Default Description
children Snippet - The trigger content. If not provided, renders value and indicator.
class string - Additional CSS classes to apply.
clearable boolean false Whether to show a clear button when a value is selected.

Select.Content

The dropdown content container for select items.

Prop Type Default Description
children Snippet - The select content.
class string - Additional CSS classes to apply.
portal boolean true Whether to render the select content in a portal.

Select.Item

An individual selectable item in the dropdown.

Prop Type Default Description
children Snippet - The select item content.
class string - Additional CSS classes to apply.
showIndicator boolean true Whether to show the check indicator when selected.

Select.ItemGroup

A group of related select items with an optional label.

Prop Type Default Description
children Snippet - The group content (items).
label string - The group label text.
class string - Additional CSS classes to apply.

Select.Label

A label for the select component.

Prop Type Default Description
children Snippet - The label content.
class string - Additional CSS classes to apply.

Select.Value

Displays the currently selected value in the trigger.

Prop Type Default Description
children Snippet<[items: any[]]> - Custom render snippet for the selected value. Receives the selected items array.
prefix Snippet<[items: any[]]> - Prefix snippet rendered before the value text. Receives the selected items array.
class string - Additional CSS classes to apply.
placeholder string "Select an option" Placeholder text when no value is selected.
valueKey string - Property key to get the display value from the selected item. If not set, uses the default item string representation.

Select.Indicator

The dropdown indicator icon (typically a caret/chevron).

Prop Type Default Description
children Snippet - Custom icon for the indicator.
class string - Additional CSS classes to apply.

Select.ClearTrigger

A button to clear the current selection.

Prop Type Default Description
children Snippet - Custom icon or content for the clear trigger.
class string - Additional CSS classes to apply.

Select.AvatarValue

Displays the selected value with an avatar image.

Prop Type Default Description
class string - Additional CSS classes to apply.
placeholder string "Select an option" Placeholder text when no value is selected.
avatarKey string "avatar" Property key to get the avatar src from the selected item.
nameKey string "name" Property key to get the name/label from the selected item.
avatarSize number 20 Size of the avatar in pixels.