Select

Listbox select with field and flush trigger variants.

Usage

svelte

<script lang="ts">
  import { Select } from "@milandekruijf/ui/svelte";

  let value = $state("slate");
  const options = [
    { value: "slate", label: "Slate" },
    { value: "blue", label: "Blue" },
  ];
</script>

<Select bind:value {options} ariaLabel="Pick a color" />

Examples

Color options

<script lang="ts">
  import { css } from "@milandekruijf/pandacss/css";
  import { Select } from "@milandekruijf/ui/svelte";

  let value = $state("slate");

  const options = [
    { value: "slate", label: "slate" },
    { value: "blue", label: "blue" },
    { value: "amber", label: "amber" },
  ];

  const wrapClass = css({ maxW: "28rem", minW: 0 });
</script>

<div class={wrapClass}>
  <Select bind:value {options} ariaLabel="Pick a color scale" />
</div>

Props

Prop	Type	Default	Description
value	`string`	—	Bindable selected value (`bind:value`).
options	`SelectOption[]`	—	Options to choose from, each `{ value, label }`.
placeholder?	`string`	"Select an option"	Trigger text while no option matches.
ariaLabel?	`string`	—	Accessible name for the trigger.
triggerVariant?	`"field" \| "flush"`	"field"	`field` matches the text field surface; `flush` is a transparent trigger for nested surfaces.
triggerLabel?	`Snippet`	—	Replaces the visible trigger text; list items still show `option.label`.
showChevron?	`boolean`	true	Hides the dropdown chevron when false.
contentWidthSource?	`HTMLElement \| null`	null	When set, the open menu matches this element's width (e.g. a nav bar).
onValueChange?	`(value: string) => void`	—	Fires when the user picks a value (use with `bind:value`).
onOpenChangeComplete?	`(open: boolean) => void`	—	Fires once the open/close animation settles.
disabled?	`boolean`	false	Disables the trigger.
tooltip?	`string`	—	Hint shown on hover/focus of the trigger, below it; useful for icon-only flush triggers.
class?	`string`	—	Extra classes merged on the trigger.

`SelectOption` is `{ value: string; label: string }`.