Select

Displays a list of options for the user to pick from, triggered by a button.

<script lang="ts">
  import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@sveltery/components/select';

  const items = [
    { label: 'Select a fruit', value: null },
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Blueberry', value: 'blueberry' },
    { label: 'Grapes', value: 'grapes' },
    { label: 'Pineapple', value: 'pineapple' }
  ];
</script>

<Select {items}>
  <SelectTrigger class="w-full max-w-48">
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      {#each items as item (item.value)}
        <SelectItem value={item.value}>{item.label}</SelectItem>
      {/each}
    </SelectGroup>
  </SelectContent>
</Select>

Installation

Install the dependencies

pnpm add cn github:sveltery/base

Copy the component

Copy the following files into src/lib/components/ui/select.

src/lib/components/ui/select/SelectContent.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { Select as Primitive } from '@sveltery/base/select';
  import { cn } from 'cn';
  import SelectScrollDownButton from './SelectScrollDownButton.svelte';
  import SelectScrollUpButton from './SelectScrollUpButton.svelte';
  let {
    children,
    class: classProp,
    side = 'bottom',
    sideOffset = 4,
    align = 'center',
    alignOffset = 0,
    alignItemWithTrigger = true,
    ...props
  }: ComponentProps<typeof Primitive.Popup> & Pick<ComponentProps<typeof Primitive.Positioner>, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'> = $props();
</script>
<Primitive.Portal>
  <Primitive.Positioner {side} {sideOffset} {align} {alignOffset} {alignItemWithTrigger} class="isolate z-50">
    <Primitive.Popup
      data-slot="select-content"
      data-align-trigger={alignItemWithTrigger}
      {...props}
      class={cn('bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none', classProp)}
    >
      <SelectScrollUpButton />
      <Primitive.List>{@render children?.()}</Primitive.List>
      <SelectScrollDownButton />
    </Primitive.Popup>
  </Primitive.Positioner>
</Primitive.Portal>

src/lib/components/ui/select/SelectGroup.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { Select as Primitive } from '@sveltery/base/select';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: ComponentProps<typeof Primitive.Group> = $props();
</script>
<Primitive.Group data-slot="select-group" {children} {...props} class={cn('scroll-my-1 p-1', classProp)} />

src/lib/components/ui/select/SelectItem.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { Select as Primitive } from '@sveltery/base/select';
  import { cn } from 'cn';
  import CheckIcon from '@lucide/svelte/icons/check';
  let { children, class: classProp, ...props }: ComponentProps<typeof Primitive.Item> = $props();
</script>
<Primitive.Item
  data-slot="select-item"
  {...props}
  class={cn("focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", classProp)}
>
  <Primitive.ItemText class="flex flex-1 gap-2 shrink-0 whitespace-nowrap">
    {@render children?.()}
  </Primitive.ItemText>
  <Primitive.ItemIndicator class="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
    <CheckIcon class="pointer-events-none" />
  </Primitive.ItemIndicator>
</Primitive.Item>

src/lib/components/ui/select/SelectLabel.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { Select as Primitive } from '@sveltery/base/select';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: ComponentProps<typeof Primitive.GroupLabel> = $props();
</script>
<Primitive.GroupLabel data-slot="select-label" {children} {...props} class={cn('text-muted-foreground px-1.5 py-1 text-xs', classProp)} />

src/lib/components/ui/select/SelectScrollDownButton.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { Select as Primitive } from '@sveltery/base/select';
  import { cn } from 'cn';
  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
  let { class: classProp, ...props }: ComponentProps<typeof Primitive.ScrollDownArrow> = $props();
</script>
<Primitive.ScrollDownArrow data-slot="select-scroll-down-button" {...props} class={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full", classProp)}>
  <ChevronDownIcon />
</Primitive.ScrollDownArrow>

src/lib/components/ui/select/SelectScrollUpButton.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { Select as Primitive } from '@sveltery/base/select';
  import { cn } from 'cn';
  import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
  let { class: classProp, ...props }: ComponentProps<typeof Primitive.ScrollUpArrow> = $props();
</script>
<Primitive.ScrollUpArrow data-slot="select-scroll-up-button" {...props} class={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full", classProp)}>
  <ChevronUpIcon />
</Primitive.ScrollUpArrow>

src/lib/components/ui/select/SelectSeparator.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { Select as Primitive } from '@sveltery/base/select';
  import { cn } from 'cn';
  let { class: classProp, ...props }: ComponentProps<typeof Primitive.Separator> = $props();
</script>
<Primitive.Separator data-slot="select-separator" {...props} class={cn('bg-border -mx-1 my-1 h-px pointer-events-none', classProp)} />

src/lib/components/ui/select/SelectTrigger.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { Select as Primitive } from '@sveltery/base/select';
  import { cn } from 'cn';
  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
  let { children, class: classProp, size = 'default', ...props }: ComponentProps<typeof Primitive.Trigger> & { size?: 'sm' | 'default' } = $props();
</script>
<Primitive.Trigger
  data-slot="select-trigger"
  data-size={size}
  {...props}
  class={cn("border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0", classProp)}
>
  {@render children?.()}
  <Primitive.Icon class="text-muted-foreground size-4 pointer-events-none">
    {#snippet render(iconProps)}
      <ChevronDownIcon {...(iconProps as Record<string, unknown>)} />
    {/snippet}
  </Primitive.Icon>
</Primitive.Trigger>

src/lib/components/ui/select/SelectValue.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { Select as Primitive } from '@sveltery/base/select';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: ComponentProps<typeof Primitive.Value> = $props();
</script>
<Primitive.Value data-slot="select-value" {children} {...props} class={cn('flex flex-1 text-left', classProp)} />

src/lib/components/ui/select/index.ts

import { Select as Primitive } from '@sveltery/base/select';

export const Select = Primitive.Root as typeof Primitive.Root;
export { default as SelectGroup } from './SelectGroup.svelte';
export { default as SelectValue } from './SelectValue.svelte';
export { default as SelectTrigger } from './SelectTrigger.svelte';
export { default as SelectContent } from './SelectContent.svelte';
export { default as SelectLabel } from './SelectLabel.svelte';
export { default as SelectItem } from './SelectItem.svelte';
export { default as SelectSeparator } from './SelectSeparator.svelte';
export { default as SelectScrollUpButton } from './SelectScrollUpButton.svelte';
export { default as SelectScrollDownButton } from './SelectScrollDownButton.svelte';

Update the import paths

Change the imports to match your project setup.

Usage

<script lang="ts">
  import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '$lib/components/ui/select';

  const items = [
    { label: 'Light', value: 'light' },
    { label: 'Dark', value: 'dark' },
    { label: 'System', value: 'system' }
  ];
</script>

<Select {items}>
  <SelectTrigger class="w-[180px]">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      {#each items as item (item.value)}
        <SelectItem value={item.value}>{item.label}</SelectItem>
      {/each}
    </SelectGroup>
  </SelectContent>
</Select>

Pass items to Select so SelectValue shows the label of the selected item instead of its value. An item with a null value acts as the placeholder: its label shows while nothing is selected.

Composition

Use the following composition to build a Select.

Select
├── SelectTrigger
│   └── SelectValue
└── SelectContent
    ├── SelectGroup
    │   ├── SelectLabel
    │   ├── SelectItem
    │   └── SelectItem
    ├── SelectSeparator
    └── SelectGroup
        ├── SelectLabel
        ├── SelectItem
        └── SelectItem

Binding the value

Bind value to read or change the selection from outside, or pass defaultValue to set the starting value. Bind open to control the popup.

<script lang="ts">
  let theme = $state<string | null>('system');
</script>

<Select {items} bind:value={theme}>
  ...
</Select>

Set alignItemWithTrigger on SelectContent to choose how the popup sits against the trigger. When true, the default, the popup lines the selected item up with the trigger. When false, the popup aligns to the trigger edge like a menu, and side and align apply.

Align Item

Toggle to align the item with the trigger.

<script lang="ts">
  import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel } from '@sveltery/components/field';
  import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@sveltery/components/select';
  import { Switch } from '@sveltery/components/switch';

  const items = [
    { label: 'Select a fruit', value: null },
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Blueberry', value: 'blueberry' },
    { label: 'Grapes', value: 'grapes' },
    { label: 'Pineapple', value: 'pineapple' }
  ];

  let alignItemWithTrigger = $state(true);
</script>

<FieldGroup class="w-full max-w-xs">
  <Field orientation="horizontal">
    <FieldContent>
      <FieldLabel for="align-item">Align Item</FieldLabel>
      <FieldDescription>Toggle to align the item with the trigger.</FieldDescription>
    </FieldContent>
    <Switch id="align-item" bind:checked={alignItemWithTrigger} />
  </Field>
  <Field>
    <Select {items} defaultValue="banana">
      <SelectTrigger>
        <SelectValue />
      </SelectTrigger>
      <SelectContent {alignItemWithTrigger}>
        <SelectGroup>
          {#each items as item (item.value)}
            <SelectItem value={item.value}>{item.label}</SelectItem>
          {/each}
        </SelectGroup>
      </SelectContent>
    </Select>
  </Field>
</FieldGroup>

Groups

Use SelectGroup, SelectLabel and SelectSeparator to organize items.

<script lang="ts">
  import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from '@sveltery/components/select';

  const fruits = [
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Blueberry', value: 'blueberry' }
  ];
  const vegetables = [
    { label: 'Carrot', value: 'carrot' },
    { label: 'Broccoli', value: 'broccoli' },
    { label: 'Spinach', value: 'spinach' }
  ];
  const items = [{ label: 'Select a fruit', value: null }, ...fruits, ...vegetables];
</script>

<Select {items}>
  <SelectTrigger class="w-full max-w-48">
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      {#each fruits as item (item.value)}
        <SelectItem value={item.value}>{item.label}</SelectItem>
      {/each}
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Vegetables</SelectLabel>
      {#each vegetables as item (item.value)}
        <SelectItem value={item.value}>{item.label}</SelectItem>
      {/each}
    </SelectGroup>
  </SelectContent>
</Select>

Scrollable

A select with many items scrolls inside the popup. Scroll arrows appear at the edges while there is more to see.

<script lang="ts">
  import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@sveltery/components/select';

  const regions = [
    {
      label: 'North America',
      items: [
        { label: 'Eastern Standard Time', value: 'est' },
        { label: 'Central Standard Time', value: 'cst' },
        { label: 'Mountain Standard Time', value: 'mst' },
        { label: 'Pacific Standard Time', value: 'pst' },
        { label: 'Alaska Standard Time', value: 'akst' },
        { label: 'Hawaii Standard Time', value: 'hst' }
      ]
    },
    {
      label: 'Europe & Africa',
      items: [
        { label: 'Greenwich Mean Time', value: 'gmt' },
        { label: 'Central European Time', value: 'cet' },
        { label: 'Eastern European Time', value: 'eet' },
        { label: 'Western European Summer Time', value: 'west' },
        { label: 'Central Africa Time', value: 'cat' },
        { label: 'East Africa Time', value: 'eat' }
      ]
    },
    {
      label: 'Asia',
      items: [
        { label: 'Moscow Time', value: 'msk' },
        { label: 'India Standard Time', value: 'ist' },
        { label: 'China Standard Time', value: 'cst_china' },
        { label: 'Japan Standard Time', value: 'jst' },
        { label: 'Korea Standard Time', value: 'kst' },
        { label: 'Indonesia Central Standard Time', value: 'ist_indonesia' }
      ]
    },
    {
      label: 'Australia & Pacific',
      items: [
        { label: 'Australian Western Standard Time', value: 'awst' },
        { label: 'Australian Central Standard Time', value: 'acst' },
        { label: 'Australian Eastern Standard Time', value: 'aest' },
        { label: 'New Zealand Standard Time', value: 'nzst' },
        { label: 'Fiji Time', value: 'fjt' }
      ]
    },
    {
      label: 'South America',
      items: [
        { label: 'Argentina Time', value: 'art' },
        { label: 'Bolivia Time', value: 'bot' },
        { label: 'Brasilia Time', value: 'brt' },
        { label: 'Chile Standard Time', value: 'clt' }
      ]
    }
  ];
  const items = [{ label: 'Select a timezone', value: null }, ...regions.flatMap((region) => region.items)];
</script>

<Select {items}>
  <SelectTrigger class="w-full max-w-64">
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    {#each regions as region (region.label)}
      <SelectGroup>
        <SelectLabel>{region.label}</SelectLabel>
        {#each region.items as item (item.value)}
          <SelectItem value={item.value}>{item.label}</SelectItem>
        {/each}
      </SelectGroup>
    {/each}
  </SelectContent>
</Select>

Multiple selection

Set multiple to let the user pick several items. The value becomes an array, and the popup stays open while the user picks. Pass a function to SelectValue to format the selection.

<Select {items} multiple defaultValue={[]}>
  <SelectTrigger class="w-72">
    <SelectValue>
      {#snippet children(value)}
        {(value as string[]).length === 0 ? 'Select fruits' : `${(value as string[]).length} fruits selected`}
      {/snippet}
    </SelectValue>
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      {#each items as item (item.value)}
        <SelectItem value={item.value}>{item.label}</SelectItem>
      {/each}
    </SelectGroup>
  </SelectContent>
</Select>

Object values

An item value can be an object. Pass itemToStringValue so the form value and the hidden input get a string, and itemToStringLabel when the object has no label.

<Select defaultValue={plans[0]} itemToStringValue={(plan) => plan.name}>
  <SelectTrigger class="h-auto! w-72">
    <SelectValue>
      {#snippet children(value)}
        {(value as Plan).name}
      {/snippet}
    </SelectValue>
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      {#each plans as plan (plan.name)}
        <SelectItem value={plan}>{plan.name}</SelectItem>
      {/each}
    </SelectGroup>
  </SelectContent>
</Select>

Forms

Give Select a name and it submits with its form through a hidden input, and a form reset restores defaultValue. Set required to block submission until the user picks a value.

<form method="POST">
  <Select name="fruit" {items} required>
    ...
  </Select>
  <button type="submit">Submit</button>
</form>

Disabled

Set disabled on Select to disable the whole control, or on a SelectItem to disable one option.

<script lang="ts">
  import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@sveltery/components/select';

  const items = [
    { label: 'Select a fruit', value: null },
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Blueberry', value: 'blueberry' },
    { label: 'Grapes', value: 'grapes', disabled: true },
    { label: 'Pineapple', value: 'pineapple' }
  ];
</script>

<Select {items} disabled>
  <SelectTrigger class="w-full max-w-48">
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      {#each items as item (item.value)}
        <SelectItem value={item.value} disabled={item.disabled}>{item.label}</SelectItem>
      {/each}
    </SelectGroup>
  </SelectContent>
</Select>

Invalid

Set aria-invalid on SelectTrigger to show an error state. In a Field, also set data-invalid on the Field and add a FieldError.

<Field data-invalid>
  <FieldLabel>Fruit</FieldLabel>
  <Select {items}>
    <SelectTrigger aria-invalid>
      <SelectValue />
    </SelectTrigger>
    ...
  </Select>
  <FieldError>Please select a fruit.</FieldError>
</Field>

<script lang="ts">
  import { Field, FieldError, FieldLabel } from '@sveltery/components/field';
  import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@sveltery/components/select';

  const items = [
    { label: 'Select a fruit', value: null },
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Blueberry', value: 'blueberry' }
  ];
</script>

<Field data-invalid class="w-full max-w-48">
  <FieldLabel>Fruit</FieldLabel>
  <Select {items}>
    <SelectTrigger aria-invalid>
      <SelectValue />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        {#each items as item (item.value)}
          <SelectItem value={item.value}>{item.label}</SelectItem>
        {/each}
      </SelectGroup>
    </SelectContent>
  </Select>
  <FieldError>Please select a fruit.</FieldError>
</Field>

RTL

Wrap the select in a DirectionProvider and set dir on SelectTrigger and SelectContent. Use the buttons to switch the language.

<script lang="ts">
  import { Button } from '@sveltery/components/button';
  import { DirectionProvider } from '@sveltery/components/direction';
  import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from '@sveltery/components/select';

  const translations = {
    en: {
      dir: 'ltr',
      selectFruit: 'Select a fruit',
      fruits: 'Fruits',
      apple: 'Apple',
      banana: 'Banana',
      blueberry: 'Blueberry',
      grapes: 'Grapes',
      pineapple: 'Pineapple',
      vegetables: 'Vegetables',
      carrot: 'Carrot',
      broccoli: 'Broccoli',
      spinach: 'Spinach'
    },
    ar: {
      dir: 'rtl',
      selectFruit: 'اختر فاكهة',
      fruits: 'الفواكه',
      apple: 'تفاح',
      banana: 'موز',
      blueberry: 'توت أزرق',
      grapes: 'عنب',
      pineapple: 'أناناس',
      vegetables: 'الخضروات',
      carrot: 'جزر',
      broccoli: 'بروكلي',
      spinach: 'سبانخ'
    },
    he: {
      dir: 'rtl',
      selectFruit: 'בחר פרי',
      fruits: 'פירות',
      apple: 'תפוח',
      banana: 'בננה',
      blueberry: 'אוכמניה',
      grapes: 'ענבים',
      pineapple: 'אננס',
      vegetables: 'ירקות',
      carrot: 'גזר',
      broccoli: 'ברוקולי',
      spinach: 'תרד'
    }
  } as const;

  let language = $state<keyof typeof translations>('ar');
  let selected = $state<string | null>(null);
  const t = $derived(translations[language]);
  const fruits = $derived([
    { label: t.apple, value: 'apple' },
    { label: t.banana, value: 'banana' },
    { label: t.blueberry, value: 'blueberry' },
    { label: t.grapes, value: 'grapes' },
    { label: t.pineapple, value: 'pineapple' }
  ]);
  const vegetables = $derived([
    { label: t.carrot, value: 'carrot' },
    { label: t.broccoli, value: 'broccoli' },
    { label: t.spinach, value: 'spinach' }
  ]);
  const items = $derived([{ label: t.selectFruit, value: null }, ...fruits, ...vegetables]);
</script>

<div class="flex w-full max-w-sm flex-col gap-4">
  <div class="flex gap-2">
    {#each Object.keys(translations) as code (code)}
      <Button variant={language === code ? 'default' : 'outline'} size="sm" onclick={() => (language = code as keyof typeof translations)}>
        {code}
      </Button>
    {/each}
  </div>
  <DirectionProvider direction={t.dir}>
    <Select {items} bind:value={selected}>
      <SelectTrigger class="w-32" dir={t.dir}>
        <SelectValue />
      </SelectTrigger>
      <SelectContent dir={t.dir}>
        <SelectGroup>
          <SelectLabel>{t.fruits}</SelectLabel>
          {#each fruits as item (item.value)}
            <SelectItem value={item.value}>{item.label}</SelectItem>
          {/each}
        </SelectGroup>
        <SelectSeparator />
        <SelectGroup>
          <SelectLabel>{t.vegetables}</SelectLabel>
          {#each vegetables as item (item.value)}
            <SelectItem value={item.value}>{item.label}</SelectItem>
          {/each}
        </SelectGroup>
      </SelectContent>
    </Select>
  </DirectionProvider>
</div>

Examples

Basic

Sides

With Icons

With Groups & Labels

Large List

Multiple Selection

Sizes

Subscription Plan

With Button

Item Aligned

With Field

Invalid

Inline with Input & NativeSelect

Disabled

In Dialog

<script lang="ts">
  import { Example, ExampleWrapper } from '@sveltery/components/example';
  import { Button } from '@sveltery/components/button';
  import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@sveltery/components/dialog';
  import { Field, FieldDescription, FieldError, FieldLabel } from '@sveltery/components/field';
  import { IconPlaceholder } from '@sveltery/components/icons';
  import { Input } from '@sveltery/components/input';
  import { Item, ItemContent, ItemDescription, ItemTitle } from '@sveltery/components/item';
  import { NativeSelect, NativeSelectOption } from '@sveltery/components/native-select';
  import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from '@sveltery/components/select';

  const sides = ['inline-start', 'left', 'top', 'bottom', 'right', 'inline-end'] as const;

  const fruitItems = [
    { label: 'Select a fruit', value: null },
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Blueberry', value: 'blueberry' },
    { label: 'Grapes', value: 'grapes' },
    { label: 'Pineapple', value: 'pineapple' }
  ];
  const sideItems = [
    { label: 'Select', value: null },
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Blueberry', value: 'blueberry' }
  ];
  const chartTypes = [
    { label: 'Chart Type', value: null, icon: 'chart' },
    { label: 'Line', value: 'line', icon: 'line' },
    { label: 'Bar', value: 'bar', icon: 'bar' },
    { label: 'Pie', value: 'pie', icon: 'pie' }
  ] as const;
  const fruits = [
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Blueberry', value: 'blueberry' }
  ];
  const vegetables = [
    { label: 'Carrot', value: 'carrot' },
    { label: 'Broccoli', value: 'broccoli' },
    { label: 'Spinach', value: 'spinach' }
  ];
  const groupedItems = [{ label: 'Select a fruit', value: null }, ...fruits, ...vegetables];
  const largeItems = [{ label: 'Select an item', value: null }, ...Array.from({ length: 100 }, (_, i) => ({ label: `Item ${i}`, value: `item-${i}` }))];
  const sizeItems = [
    { label: 'Select a fruit', value: null },
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Blueberry', value: 'blueberry' }
  ];
  const disabledItems = [
    { label: 'Select a fruit', value: null },
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Blueberry', value: 'blueberry' },
    { label: 'Grapes', value: 'grapes', disabled: true },
    { label: 'Pineapple', value: 'pineapple' }
  ];
  const filterItems = [
    { label: 'Filter', value: null },
    { label: 'All', value: 'all' },
    { label: 'Active', value: 'active' },
    { label: 'Inactive', value: 'inactive' }
  ];
  const plans = [
    { name: 'Starter', description: 'Perfect for individuals getting started.' },
    { name: 'Professional', description: 'Ideal for growing teams and businesses.' },
    { name: 'Enterprise', description: 'Advanced features for large organizations.' }
  ];
  type Plan = (typeof plans)[number];
  const multipleItems = [
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Blueberry', value: 'blueberry' },
    { label: 'Grapes', value: 'grapes' },
    { label: 'Pineapple', value: 'pineapple' },
    { label: 'Strawberry', value: 'strawberry' },
    { label: 'Watermelon', value: 'watermelon' }
  ];
</script>

{#snippet chartLabel(chart: (typeof chartTypes)[number])}
  {#if chart.icon === 'bar'}
    <IconPlaceholder lucide="ChartBarIcon" tabler="IconChartBar" hugeicons="Chart03Icon" phosphor="ChartBarIcon" remixicon="RiBarChartLine" />
  {:else if chart.icon === 'pie'}
    <IconPlaceholder lucide="ChartPieIcon" tabler="IconChartPie" hugeicons="Chart03Icon" phosphor="ChartPieIcon" remixicon="RiPieChartLine" />
  {:else}
    <IconPlaceholder lucide="ChartLineIcon" tabler="IconChartLine" hugeicons="Chart03Icon" phosphor="ChartLineIcon" remixicon="RiLineChartLine" />
  {/if}
  {chart.label}
{/snippet}

{#snippet planItem(plan: Plan)}
  <Item size="xs" class="w-full p-0">
    <ItemContent class="gap-0 normal-case">
      <ItemTitle class="font-sans">{plan.name}</ItemTitle>
      <ItemDescription class="text-xs font-normal tracking-normal">{plan.description}</ItemDescription>
    </ItemContent>
  </Item>
{/snippet}

{#snippet SelectBasic()}
  <Example title="Basic">
    <Select items={fruitItems}>
      <SelectTrigger>
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          {#each fruitItems as item (item.value)}
            <SelectItem value={item.value}>{item.label}</SelectItem>
          {/each}
        </SelectGroup>
      </SelectContent>
    </Select>
  </Example>
{/snippet}

{#snippet SelectSides()}
  <Example title="Sides" containerClass="col-span-2">
    <div class="flex flex-wrap justify-center gap-2">
      {#each sides as side (side)}
        <Select items={sideItems}>
          <SelectTrigger class="w-28 capitalize">
            <SelectValue placeholder={side.replace('-', ' ')} />
          </SelectTrigger>
          <SelectContent {side} alignItemWithTrigger={false}>
            <SelectGroup>
              {#each sideItems as item (item.value)}
                <SelectItem value={item.value}>{item.label}</SelectItem>
              {/each}
            </SelectGroup>
          </SelectContent>
        </Select>
      {/each}
    </div>
  </Example>
{/snippet}

{#snippet SelectWithIcons()}
  <Example title="With Icons">
    <div class="flex flex-col gap-4">
      {#each ['sm', 'default'] as const as size (size)}
        <Select items={chartTypes}>
          <SelectTrigger {size}>
            <SelectValue>
              {#snippet children(value)}
                {@render chartLabel(chartTypes.find((chart) => chart.value === value) ?? chartTypes[0])}
              {/snippet}
            </SelectValue>
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              {#each chartTypes as chart (chart.value)}
                <SelectItem value={chart.value}>{@render chartLabel(chart)}</SelectItem>
              {/each}
            </SelectGroup>
          </SelectContent>
        </Select>
      {/each}
    </div>
  </Example>
{/snippet}

{#snippet SelectWithGroups()}
  <Example title="With Groups & Labels">
    <Select items={groupedItems}>
      <SelectTrigger>
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>Fruits</SelectLabel>
          {#each fruits as item (item.value)}
            <SelectItem value={item.value}>{item.label}</SelectItem>
          {/each}
        </SelectGroup>
        <SelectSeparator />
        <SelectGroup>
          <SelectLabel>Vegetables</SelectLabel>
          {#each vegetables as item (item.value)}
            <SelectItem value={item.value}>{item.label}</SelectItem>
          {/each}
        </SelectGroup>
      </SelectContent>
    </Select>
  </Example>
{/snippet}

{#snippet SelectLargeList()}
  <Example title="Large List">
    <Select items={largeItems}>
      <SelectTrigger>
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          {#each largeItems as item (item.value)}
            <SelectItem value={item.value}>{item.label}</SelectItem>
          {/each}
        </SelectGroup>
      </SelectContent>
    </Select>
  </Example>
{/snippet}

{#snippet SelectSizes()}
  <Example title="Sizes">
    <div class="flex flex-col gap-4">
      {#each ['sm', 'default'] as const as size (size)}
        <Select items={sizeItems}>
          <SelectTrigger {size}>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              {#each sizeItems as item (item.value)}
                <SelectItem value={item.value}>{item.label}</SelectItem>
              {/each}
            </SelectGroup>
          </SelectContent>
        </Select>
      {/each}
    </div>
  </Example>
{/snippet}

{#snippet SelectWithButton()}
  <Example title="With Button">
    <div class="flex flex-col gap-4">
      {#each ['sm', 'default'] as const as size (size)}
        <div class="flex items-center gap-2">
          <Select items={sizeItems}>
            <SelectTrigger {size}>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                {#each sizeItems as item (item.value)}
                  <SelectItem value={item.value}>{item.label}</SelectItem>
                {/each}
              </SelectGroup>
            </SelectContent>
          </Select>
          <Button variant="outline" {size}>Submit</Button>
        </div>
      {/each}
    </div>
  </Example>
{/snippet}

{#snippet SelectItemAligned()}
  <Example title="Item Aligned">
    <Select items={disabledItems}>
      <SelectTrigger>
        <SelectValue />
      </SelectTrigger>
      <SelectContent alignItemWithTrigger={true}>
        <SelectGroup>
          {#each disabledItems as item (item.value)}
            <SelectItem value={item.value} disabled={item.disabled}>{item.label}</SelectItem>
          {/each}
        </SelectGroup>
      </SelectContent>
    </Select>
  </Example>
{/snippet}

{#snippet SelectWithField()}
  <Example title="With Field">
    <Field>
      <FieldLabel for="select-fruit">Favorite Fruit</FieldLabel>
      <Select items={fruitItems}>
        <SelectTrigger id="select-fruit">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            {#each fruitItems as item (item.value)}
              <SelectItem value={item.value}>{item.label}</SelectItem>
            {/each}
          </SelectGroup>
        </SelectContent>
      </Select>
      <FieldDescription>Choose your favorite fruit from the list.</FieldDescription>
    </Field>
  </Example>
{/snippet}

{#snippet SelectInvalid()}
  <Example title="Invalid">
    <div class="flex flex-col gap-4">
      <Select items={fruitItems}>
        <SelectTrigger aria-invalid="true">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            {#each fruitItems as item (item.value)}
              <SelectItem value={item.value}>{item.label}</SelectItem>
            {/each}
          </SelectGroup>
        </SelectContent>
      </Select>
      <Field data-invalid>
        <FieldLabel for="select-fruit-invalid">Favorite Fruit</FieldLabel>
        <Select items={fruitItems}>
          <SelectTrigger id="select-fruit-invalid" aria-invalid>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              {#each fruitItems as item (item.value)}
                <SelectItem value={item.value}>{item.label}</SelectItem>
              {/each}
            </SelectGroup>
          </SelectContent>
        </Select>
        <FieldError errors={[{ message: 'Please select a valid fruit.' }]} />
      </Field>
    </div>
  </Example>
{/snippet}

{#snippet SelectInline()}
  <Example title="Inline with Input & NativeSelect">
    <div class="flex items-center gap-2">
      <Input placeholder="Search..." class="flex-1" />
      <Select items={filterItems}>
        <SelectTrigger class="w-[140px]">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            {#each filterItems as item (item.value)}
              <SelectItem value={item.value}>{item.label}</SelectItem>
            {/each}
          </SelectGroup>
        </SelectContent>
      </Select>
      <NativeSelect class="w-[140px]">
        <NativeSelectOption value="">Sort by</NativeSelectOption>
        <NativeSelectOption value="name">Name</NativeSelectOption>
        <NativeSelectOption value="date">Date</NativeSelectOption>
        <NativeSelectOption value="status">Status</NativeSelectOption>
      </NativeSelect>
    </div>
  </Example>
{/snippet}

{#snippet SelectDisabled()}
  <Example title="Disabled">
    <Select items={disabledItems} disabled>
      <SelectTrigger>
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          {#each disabledItems as item (item.value)}
            <SelectItem value={item.value} disabled={item.disabled}>{item.label}</SelectItem>
          {/each}
        </SelectGroup>
      </SelectContent>
    </Select>
  </Example>
{/snippet}

{#snippet SelectPlan()}
  <Example title="Subscription Plan">
    <Select defaultValue={plans[0]} itemToStringValue={(plan: Plan) => plan.name}>
      <SelectTrigger class="h-auto! w-72">
        <SelectValue>
          {#snippet children(value)}
            {@render planItem(value as Plan)}
          {/snippet}
        </SelectValue>
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          {#each plans as plan (plan.name)}
            <SelectItem value={plan}>{@render planItem(plan)}</SelectItem>
          {/each}
        </SelectGroup>
      </SelectContent>
    </Select>
  </Example>
{/snippet}

{#snippet SelectMultiple()}
  <Example title="Multiple Selection">
    <Select items={multipleItems} multiple defaultValue={[]}>
      <SelectTrigger class="w-72">
        <SelectValue>
          {#snippet children(value)}
            {const selected = $derived(value as string[])}
            {#if selected.length === 0}
              Select fruits
            {:else if selected.length === 1}
              {multipleItems.find((item) => item.value === selected[0])?.label}
            {:else}
              {selected.length} fruits selected
            {/if}
          {/snippet}
        </SelectValue>
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          {#each multipleItems as item (item.value)}
            <SelectItem value={item.value}>{item.label}</SelectItem>
          {/each}
        </SelectGroup>
      </SelectContent>
    </Select>
  </Example>
{/snippet}

{#snippet SelectInDialog()}
  <Example title="In Dialog">
    <Dialog>
      <DialogTrigger>
        {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
        Open Dialog
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Select Example</DialogTitle>
          <DialogDescription>Use the select below to choose a fruit.</DialogDescription>
        </DialogHeader>
        <Select items={fruitItems}>
          <SelectTrigger>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              {#each fruitItems as item (item.value)}
                <SelectItem value={item.value}>{item.label}</SelectItem>
              {/each}
            </SelectGroup>
          </SelectContent>
        </Select>
      </DialogContent>
    </Dialog>
  </Example>
{/snippet}

<ExampleWrapper>
  {@render SelectBasic()}
  {@render SelectSides()}
  {@render SelectWithIcons()}
  {@render SelectWithGroups()}
  {@render SelectLargeList()}
  {@render SelectMultiple()}
  {@render SelectSizes()}
  {@render SelectPlan()}
  {@render SelectWithButton()}
  {@render SelectItemAligned()}
  {@render SelectWithField()}
  {@render SelectInvalid()}
  {@render SelectInline()}
  {@render SelectDisabled()}
  {@render SelectInDialog()}
</ExampleWrapper>

API reference

Select is styled on top of the Sveltery Base Select primitive, which owns the popup positioning, keyboard navigation, typeahead, focus handling, dismissal and form value. SelectContent renders the Base portal, positioner, popup and list with scroll arrows, and takes the positioner's side, align, sideOffset, alignOffset and alignItemWithTrigger props. SelectTrigger takes size (default or sm). The trigger sets data-popup-open while the popup is open, so style the open state with data-popup-open:. See the Base UI Select documentation for the behavior it ports.