Studio
2

Select

Installation

pnpm dlx @mielui/svelte add select

Usage

The theme setting chrome.borders chooses "single" or "double" framing. Double is the default. Single removes the extra frame while preserving content padding, composition, and inset variants.

Use Select.Value for a trigger label that follows the selection. Use bind:value or onValueChange on Select.Root to react to both pointer and keyboard selection; an item onclick handler only observes native clicks. Trigger onclick receives the mouse event before click activation; preventDefault cancels that activation. Arrow keys, Home, End, and typing navigate options; disabled items are skipped. Before an option label is mounted, a preselected value is displayed as its value string.

Single selection is the default and binds a string. Set type="multiple" to bind a string array; selecting an item toggles it without closing the menu. Select.Value joins the selected labels. Use name to include the selection in form submission; multiple values use the same field name and can be read with FormData.getAll(). Root also accepts disabled and required.

import * as Select from '$lib/mielui/components/select';

<Select.Root bind:value={role}>
  <Select.Trigger aria-label="Role"><Select.Value placeholder="Select a role" /></Select.Trigger>
  <Select.Content>
    <Select.Item value="designer">Designer</Select.Item>
  </Select.Content>
</Select.Root>

Examples

Multiple selection

Select several teams, clear the selection, or submit the named values. Disabled options remain unavailable. Escape closes the menu and returns focus to the trigger.

Scrollable

Long option lists stay in a height-capped menu and scroll inside it.

Dynamic width

The menu sizes to its longest option plus a buffer, even when the trigger is narrower.

Glass surface

Set surface="glass" on Select.Content for a translucent background with blur. Omit surface to inherit --mielui-surface from your theme, or set surface="solid" to override it. The glass surface keeps an opaque fallback when backdrop filtering is unavailable and respects reduced-transparency preferences.

API reference

Select.Root

Provides select state.

Prop Type Default
open Bindable boolean | undefined false
onOpenChange ((open: boolean) => void) | undefined —
name string | undefined —
disabled boolean | undefined false
required boolean | undefined false
children Snippet<[]> | undefined —
type "single" | undefined | "multiple" 'single'
value Bindable string | undefined | string[] | undefined type === 'multiple' ? [] : ''
onValueChange ((value: string) => void) | undefined | ((value: string[]) => void) | undefined —

Select.Content

Renders select options.

Prop Type Default
surface "solid" | "glass" | undefined —
children Required Snippet<[]> —
class string | undefined —
dynamic boolean | undefined false

Select.Item

Defines a selectable option.

Prop Type Default
value Required string | string | (string & string[]) —
label string | undefined —
children Snippet<[]> | undefined —
disabled boolean | undefined —
variant ButtonVariant | undefined —
size "sm" | "md" | "lg" | "icon" | undefined —
element Bindable HTMLButtonElement | HTMLAnchorElement | undefined

Bindable reference to the rendered DOM element. Type is the union of the two possible element types -- narrow at the use site:

 —
unstyled boolean | undefined

Skip the variant/size base classes and render with `class` alone.

 —
status ButtonStatus | undefined

Controlled visual state. Loading remains focusable and refuses activation.

 —
loading boolean | undefined

Convenience alias for `status="loading"`.

 —
loadingLabel string | undefined —
successLabel string | undefined —
errorLabel string | undefined —
onclick ((event: MouseEvent) => void) | undefined —
onkeydown ((event: KeyboardEvent) => void) | undefined —
href string | undefined —

Select.Label

Labels a select section.

Prop Type Default
children Required Snippet<[]> —
class string | undefined —

Select.Trigger

Opens the select menu.

Prop Type Default
children Snippet<[]> | undefined —
class string | undefined —
variant ButtonVariant | undefined 'outline'
style string | undefined —
onclick ((event: MouseEvent) => void) | undefined —
size "sm" | "md" | "lg" | "icon" | undefined —
element HTMLButtonElement | HTMLAnchorElement | undefined —
unstyled boolean | undefined

Forwarded to Button: render with `class` alone, skipping variant/size.

 —
icon boolean | undefined —
onopen (() => void) | undefined

Called immediately before this trigger opens its popover.

 —

Select.Value

Displays the selected value.

Prop Type Default
placeholder string | undefined 'Select'
class string | undefined —