Select | COSS for Svelte

Installation

pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/select.json

Usage

<script lang="ts">
  import * as Select from "$lib/components/ui/select/index.js";

  const items = [
    { label: "Select framework", value: null },
    { label: "SvelteKit", value: "sveltekit" },
    { label: "Vite", value: "vite" },
    { label: "Astro", value: "astro" },
  ];
</script>

<Select.Root {items}>
  <Select.Trigger><Select.Value placeholder="Select a framework" /></Select.Trigger>
  <Select.Popup>
    <Select.Label>Frameworks</Select.Label>
    {#each items as item (item.value)}
      <Select.Item value={item.value}>{item.label}</Select.Item>
    {/each}
  </Select.Popup>
</Select.Root>

API Reference

Select.Root

Root component. Alias for Select.Root from Shards UI.

Select.Trigger

Trigger button that opens the select dropdown. Styled wrapper for Select.Trigger from Shards UI.

Prop	Type	Default	Description
`size`	`"sm" \\| "default" \\| "lg"`	`"default"`	Controls the size of the trigger

Select.Value

Displays the selected value. Styled wrapper for Select.Value from Shards UI.

Popup container for select options. Also exported as Select.Content.

Prop	Type	Default	Description
`alignItemWithTrigger`	`boolean`	`true`	Aligns the selected item with the trigger
`sideOffset`	`number`	`4`	Distance from the trigger in pixels
`portalProps`	`SelectPopupProps["portalProps"]`	-	Props forwarded to the internal portal

Select.Item

Individual select option. Styled wrapper for Select.Item from Shards UI with built-in indicator.

Select.Group

Groups related select items. Alias for Select.Group from Shards UI.

Select.Label

Label for all options in the popup. Styled wrapper for Select.Label from Shards UI. Clicking it focuses the select trigger without opening the popup.

Select.GroupLabel

Label for a select group. Styled wrapper for Select.GroupLabel from Shards UI.

Select.Separator

Visual separator between items. Styled wrapper for Select.Separator from Shards UI.

Select.Button

A standalone button styled like a Select.Trigger. Use selectTriggerClass on other trigger components, such as Combobox.Trigger or Menu.Trigger, to give them a select-like appearance.

Prop	Type	Default	Description
`size`	`"sm" \\| "default" \\| "lg"`	`"default"`	Controls the size of the button

<script lang="ts">
  import { selectTriggerClass } from "$lib/components/ui/select/index.js";
</script>

<Combobox.Trigger class={selectTriggerClass}>
  <Combobox.Value placeholder="Select a fruit" />
</Combobox.Trigger>

Examples

For accessible labelling and validation, prefer using the Field component to wrap selects. See the related example: Select field.

Small Size

Large Size

Disabled

Without Item Alignment

With Groups

With Label

Multiple Selection

With Icon

Options with Icon

With Object Values

SelectButton with Combobox

Use selectTriggerClass on Combobox.Trigger to create a combobox that looks like a select.