Select

A select-only combobox: a non-editable trigger that shows the current selection (or a placeholder) and opens a ListBox in a Popover to choose from. It pairs the Popover positioning layer and the ListBox option engine behind one headless connectSelect core, so the same component supports single and multiple selection, type-to-jump, removable chips, a clear button, and native form submission. For a plain native <select> element, see Select (native).

Unlike the Combobox, the Select has no text field — you don’t type to filter, you type to jump to a matching option. The trigger is a focusable role="combobox" element (a <div>, so it can hold the chips’ remove buttons) and it keeps DOM focus while driving the list with aria-activedescendant (the ListBox’s focusStrategy="active-descendant" mode).

Default

Single selection. Click the trigger (or press ↓ / Enter / Space) to open, arrow keys to move the cursor (focus stays on the trigger), Enter to commit. Selecting an option updates the trigger label and closes the popup.

AstroReactSvelteVue

PreviewCode

Pick a framework…

---
import Select from "../select.astro";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { id: "react", label: "React" },
  { id: "svelte", label: "Svelte" },
  { id: "vue", label: "Vue" },
  { id: "solid", label: "Solid" },
  { id: "angular", label: "Angular" },
  { id: "qwik", label: "Qwik" },
];
---

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Select
    id="astro-select-default"
    items={items}
    aria-label="Framework"
    placeholder="Pick a framework…"
  />
</div>

Pick a framework…

Selected: none

import { Select } from "../Select";
import { stack } from "@pindoba/styled-system/patterns";
import type { SelectValue } from "@pindoba/core-select";
import { useState } from "react";

const items = [
  { id: "react", label: "React" },
  { id: "svelte", label: "Svelte" },
  { id: "vue", label: "Vue" },
  { id: "solid", label: "Solid" },
  { id: "angular", label: "Angular" },
  { id: "qwik", label: "Qwik" },
];

export default function DefaultDemo() {
  const [selected, setSelected] = useState<SelectValue>(null);

  return (
    <div className={stack({ gap: "sm", alignItems: "flex-start" })}>
      <Select
        items={items}
        aria-label="Framework"
        placeholder="Pick a framework…"
        value={selected}
        onValueChange={setSelected}
      />
      <p>
        Selected:{" "}
        {Array.isArray(selected) ? selected.join(", ") : (selected ?? "none")}
      </p>
    </div>
  );
}

Pick a framework…

Selected: none

<script lang="ts">
  import Select from "../select.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
  import type { Key } from "@pindoba/core-select";

  const items = [
    { id: "react", label: "React" },
    { id: "svelte", label: "Svelte" },
    { id: "vue", label: "Vue" },
    { id: "solid", label: "Solid" },
    { id: "angular", label: "Angular" },
    { id: "qwik", label: "Qwik" },
  ];

  let selected = $state<Key | null>(null);
</script>

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Select
    {items}
    aria-label="Framework"
    placeholder="Pick a framework…"
    bind:value={selected}
  />
  <p>Selected: {selected ?? "none"}</p>
</div>

Pick a framework…

Selected: none

<script setup lang="ts">
import { ref } from "vue";
import { Select } from "@pindoba/vue-select";
import type { SelectValue } from "@pindoba/core-select";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { id: "react", label: "React" },
  { id: "svelte", label: "Svelte" },
  { id: "vue", label: "Vue" },
  { id: "solid", label: "Solid" },
  { id: "angular", label: "Angular" },
  { id: "qwik", label: "Qwik" },
];

const selected = ref<SelectValue>(null);

function onValueChange(value: SelectValue) {
  selected.value = value;
}
</script>

<template>
  <div :class="stack({ gap: 'sm', alignItems: 'flex-start' })">
    <Select
      :items="items"
      aria-label="Framework"
      placeholder="Pick a framework…"
      :value="selected"
      :onValueChange="onValueChange"
    />
    <p>
      Selected:
      {{ Array.isArray(selected) ? selected.join(", ") : (selected ?? "none") }}
    </p>
  </div>
</template>

Multiple selection

Set selectionMode="multiple". Each chosen value renders as a removable chip (Group → Badge + a dismiss Button) inside the trigger; the popup stays open after each pick. Backspace removes the last chip.

AstroReactSvelteVue

PreviewCode

Svelte

---
import Select from "../select.astro";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { id: "react", label: "React" },
  { id: "svelte", label: "Svelte" },
  { id: "vue", label: "Vue" },
  { id: "solid", label: "Solid" },
  { id: "angular", label: "Angular" },
];
---

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Select
    id="astro-select-multi"
    items={items}
    selectionMode="multiple"
    chipOverflow={false}
    defaultValue={["svelte"]}
    aria-label="Frameworks"
    placeholder="Pick frameworks…"
  />
</div>

Svelte

Selected: svelte

import { Select } from "../Select";
import { stack } from "@pindoba/styled-system/patterns";
import type { SelectValue } from "@pindoba/core-select";
import { useState } from "react";

const items = [
  { id: "react", label: "React" },
  { id: "svelte", label: "Svelte" },
  { id: "vue", label: "Vue" },
  { id: "solid", label: "Solid" },
  { id: "angular", label: "Angular" },
];

export default function MultiSelectDemo() {
  const [selected, setSelected] = useState<SelectValue>(["svelte"]);
  const list = Array.isArray(selected)
    ? selected
    : selected != null
      ? [selected]
      : [];

  return (
    <div className={stack({ gap: "sm", alignItems: "flex-start" })}>
      <Select
        items={items}
        selectionMode="multiple"
        chipOverflow={false}
        aria-label="Frameworks"
        placeholder="Pick frameworks…"
        value={selected}
        onValueChange={setSelected}
      />
      <p>Selected: {list.join(", ") || "none"}</p>
    </div>
  );
}

Svelte

Selected: svelte

<script lang="ts">
  import Select from "../select.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
  import type { Key } from "@pindoba/core-select";

  const items = [
    { id: "react", label: "React" },
    { id: "svelte", label: "Svelte" },
    { id: "vue", label: "Vue" },
    { id: "solid", label: "Solid" },
    { id: "angular", label: "Angular" },
  ];

  let selected = $state<Key[]>(["svelte"]);
</script>

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Select
    {items}
    selectionMode="multiple"
    chipOverflow={false}
    aria-label="Frameworks"
    placeholder="Pick frameworks…"
    bind:value={selected}
  />
  <p>Selected: {selected.join(", ") || "none"}</p>
</div>

Svelte

Selected: svelte

<script setup lang="ts">
import { computed, ref } from "vue";
import { Select } from "@pindoba/vue-select";
import type { SelectValue } from "@pindoba/core-select";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { id: "react", label: "React" },
  { id: "svelte", label: "Svelte" },
  { id: "vue", label: "Vue" },
  { id: "solid", label: "Solid" },
  { id: "angular", label: "Angular" },
];

const selected = ref<SelectValue>(["svelte"]);

const list = computed(() =>
  Array.isArray(selected.value)
    ? selected.value
    : selected.value != null
      ? [selected.value]
      : [],
);

function onValueChange(value: SelectValue) {
  selected.value = value;
}
</script>

<template>
  <div :class="stack({ gap: 'sm', alignItems: 'flex-start' })">
    <Select
      :items="items"
      selectionMode="multiple"
      :chipOverflow="false"
      aria-label="Frameworks"
      placeholder="Pick frameworks…"
      :value="selected"
      :onValueChange="onValueChange"
    />
    <p>Selected: {{ list.join(", ") || "none" }}</p>
  </div>
</template>

Chip overflow

When many values are selected the chip row can grow taller than the trigger has room for. Cap it with chipOverflow (defaults to 1):

chipOverflow={n} — keep the last n chips inline and collapse the rest behind a “+N” chip.
chipOverflow="auto" — measure the trigger and fit as many chips as the width allows (best with a constrained width).
chipOverflow={false} — disable collapsing entirely: every chip renders inline.

The “+N” chip opens a popover listing the collapsed options with keyboard-operable remove buttons. chipMaxChars={n} and chipMaxWidth="8rem" trim long labels (the full label stays in the chip’s title).

AstroReactSvelteVue

PreviewCode

Svelte

Vue

---
import Select from "../select.astro";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { id: "react", label: "React" },
  { id: "svelte", label: "Svelte" },
  { id: "vue", label: "Vue" },
  { id: "solid", label: "Solid" },
  { id: "angular", label: "Angular" },
  { id: "qwik", label: "Qwik" },
];
---

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Select
    id="astro-select-overflow"
    items={items}
    selectionMode="multiple"
    defaultValue={["react", "svelte", "vue"]}
    aria-label="Frameworks"
    placeholder="Pick frameworks…"
  />
</div>

Svelte

Vue

Selected: react, svelte, vue

import { Select } from "../Select";
import { stack } from "@pindoba/styled-system/patterns";
import type { SelectValue } from "@pindoba/core-select";
import { useState } from "react";

const items = [
  { id: "react", label: "React" },
  { id: "svelte", label: "Svelte" },
  { id: "vue", label: "Vue" },
  { id: "solid", label: "Solid" },
  { id: "angular", label: "Angular" },
  { id: "qwik", label: "Qwik" },
];

export default function ChipOverflowDemo() {
  const [selected, setSelected] = useState<SelectValue>([
    "react",
    "svelte",
    "vue",
  ]);
  const list = Array.isArray(selected)
    ? selected
    : selected != null
      ? [selected]
      : [];

  return (
    <div className={stack({ gap: "sm", alignItems: "flex-start" })}>
      <Select
        items={items}
        selectionMode="multiple"
        aria-label="Frameworks"
        placeholder="Pick frameworks…"
        value={selected}
        onValueChange={setSelected}
      />
      <p>Selected: {list.join(", ") || "none"}</p>
    </div>
  );
}

Svelte

Vue

Selected: react, svelte, vue

<script lang="ts">
  import Select from "../select.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
  import type { Key } from "@pindoba/core-select";

  const items = [
    { id: "react", label: "React" },
    { id: "svelte", label: "Svelte" },
    { id: "vue", label: "Vue" },
    { id: "solid", label: "Solid" },
    { id: "angular", label: "Angular" },
    { id: "qwik", label: "Qwik" },
  ];

  let selected = $state<Key[]>(["react", "svelte", "vue"]);
</script>

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Select
    {items}
    selectionMode="multiple"
    aria-label="Frameworks"
    placeholder="Pick frameworks…"
    bind:value={selected}
  />
  <p>Selected: {selected.join(", ") || "none"}</p>
</div>

Svelte

Vue

Selected: react, svelte, vue

<script setup lang="ts">
import { computed, ref } from "vue";
import { Select } from "@pindoba/vue-select";
import type { SelectValue } from "@pindoba/core-select";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { id: "react", label: "React" },
  { id: "svelte", label: "Svelte" },
  { id: "vue", label: "Vue" },
  { id: "solid", label: "Solid" },
  { id: "angular", label: "Angular" },
  { id: "qwik", label: "Qwik" },
];

const selected = ref<SelectValue>(["react", "svelte", "vue"]);

const list = computed(() =>
  Array.isArray(selected.value)
    ? selected.value
    : selected.value != null
      ? [selected.value]
      : [],
);

function onValueChange(value: SelectValue) {
  selected.value = value;
}
</script>

<template>
  <div :class="stack({ gap: 'sm', alignItems: 'flex-start' })">
    <Select
      :items="items"
      selectionMode="multiple"
      aria-label="Frameworks"
      placeholder="Pick frameworks…"
      :value="selected"
      :onValueChange="onValueChange"
    />
    <p>Selected: {{ list.join(", ") || "none" }}</p>
  </div>
</template>

Preselected & clearable

Seed an initial selection with defaultValue (a key for single-select, an array of keys for multiple). Add clearable to show a clear (×) button that resets the selection when something is selected.

AstroReactSvelteVue

PreviewCode

Svelte

---
import Select from "../select.astro";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { id: "react", label: "React" },
  { id: "svelte", label: "Svelte" },
  { id: "vue", label: "Vue" },
  { id: "solid", label: "Solid" },
];
---

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Select
    id="astro-select-preselected"
    items={items}
    defaultValue="svelte"
    clearable
    aria-label="Framework"
    placeholder="Pick a framework…"
  />
</div>

Svelte

import { Select } from "../Select";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { id: "react", label: "React" },
  { id: "svelte", label: "Svelte" },
  { id: "vue", label: "Vue" },
  { id: "solid", label: "Solid" },
];

export default function PreselectedDemo() {
  return (
    <div className={stack({ gap: "sm", alignItems: "flex-start" })}>
      <Select
        items={items}
        defaultValue="svelte"
        clearable
        aria-label="Framework"
        placeholder="Pick a framework…"
      />
    </div>
  );
}

Svelte

<script lang="ts">
  import Select from "../select.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  const items = [
    { id: "react", label: "React" },
    { id: "svelte", label: "Svelte" },
    { id: "vue", label: "Vue" },
    { id: "solid", label: "Solid" },
  ];
</script>

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Select
    {items}
    defaultValue="svelte"
    clearable
    aria-label="Framework"
    placeholder="Pick a framework…"
  />
</div>

Svelte

<script setup lang="ts">
import { Select } from "@pindoba/vue-select";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { id: "react", label: "React" },
  { id: "svelte", label: "Svelte" },
  { id: "vue", label: "Vue" },
  { id: "solid", label: "Solid" },
];
</script>

<template>
  <div :class="stack({ gap: 'sm', alignItems: 'flex-start' })">
    <Select
      :items="items"
      defaultValue="svelte"
      clearable
      aria-label="Framework"
      placeholder="Pick a framework…"
    />
  </div>
</template>

Leading content

Pass a leading snippet (Svelte) or leading slot (Astro) to render an icon inside the trigger.

AstroReactSvelteVue

PreviewCode

Pick a framework…

---
import Select from "../select.astro";
import { stack } from "@pindoba/styled-system/patterns";
import { Layers } from "@lucide/astro";

const items = [
  {
    id: "react",
    label: "React",
    description: "A library for web and native UIs",
  },
  {
    id: "svelte",
    label: "Svelte",
    description: "Cybernetically enhanced web apps",
  },
  { id: "vue", label: "Vue", description: "The progressive framework" },
  {
    id: "solid",
    label: "Solid",
    description: "Simple and performant reactivity",
  },
];
---

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Select
    id="astro-select-icons"
    items={items}
    aria-label="Framework"
    placeholder="Pick a framework…"
  >
    <Layers slot="leading" />
  </Select>
</div>

Pick a framework…

import { Select } from "../Select";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  {
    id: "react",
    label: "React",
    description: "A library for web and native UIs",
  },
  {
    id: "svelte",
    label: "Svelte",
    description: "Cybernetically enhanced web apps",
  },
  { id: "vue", label: "Vue", description: "The progressive framework" },
  {
    id: "solid",
    label: "Solid",
    description: "Simple and performant reactivity",
  },
];

function LayersIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z" />
      <path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65" />
      <path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65" />
    </svg>
  );
}

export default function WithIconsDemo() {
  return (
    <div className={stack({ gap: "sm", alignItems: "flex-start" })}>
      <Select
        items={items}
        aria-label="Framework"
        placeholder="Pick a framework…"
        leading={<LayersIcon />}
      />
    </div>
  );
}

Pick a framework…

<script lang="ts">
  import Select from "../select.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
  import Layers from "@lucide/svelte/icons/layers";

  const items = [
    {
      id: "react",
      label: "React",
      description: "A library for web and native UIs",
    },
    {
      id: "svelte",
      label: "Svelte",
      description: "Cybernetically enhanced web apps",
    },
    { id: "vue", label: "Vue", description: "The progressive framework" },
    {
      id: "solid",
      label: "Solid",
      description: "Simple and performant reactivity",
    },
  ];
</script>

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Select {items} aria-label="Framework" placeholder="Pick a framework…">
    {#snippet leading()}
      <Layers size={16} />
    {/snippet}
  </Select>
</div>

Pick a framework…

<script setup lang="ts">
import { Select } from "@pindoba/vue-select";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";
import { Layers } from "./_icons";

const items = [
  {
    id: "react",
    label: "React",
    description: "A library for web and native UIs",
  },
  {
    id: "svelte",
    label: "Svelte",
    description: "Cybernetically enhanced web apps",
  },
  { id: "vue", label: "Vue", description: "The progressive framework" },
  {
    id: "solid",
    label: "Solid",
    description: "Simple and performant reactivity",
  },
];
</script>

<template>
  <div :class="stack({ gap: 'sm', alignItems: 'flex-start' })">
    <Select
      :items="items"
      aria-label="Framework"
      placeholder="Pick a framework…"
    >
      <template #leading>
        <span :class="css({ '& svg': { width: '16px', height: '16px' } })">
          <Layers />
        </span>
      </template>
    </Select>
  </div>
</template>

Sections

Group related options with section nodes (type: "section").

AstroReactSvelteVue

PreviewCode

Pick a technology…

---
import Select from "../select.astro";
import { stack } from "@pindoba/styled-system/patterns";
import type { ListBoxNodeInput } from "@pindoba/core-select";

const items: ListBoxNodeInput[] = [
  {
    id: "frontend",
    type: "section",
    title: "Frontend",
    items: [
      { id: "react", label: "React" },
      { id: "svelte", label: "Svelte" },
      { id: "vue", label: "Vue" },
    ],
  },
  {
    id: "backend",
    type: "section",
    title: "Backend",
    items: [
      { id: "node", label: "Node.js" },
      { id: "deno", label: "Deno" },
      { id: "bun", label: "Bun" },
    ],
  },
];
---

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Select
    id="astro-select-grouped"
    items={items}
    aria-label="Technology"
    placeholder="Pick a technology…"
  />
</div>

Pick a technology…

import { Select } from "../Select";
import { stack } from "@pindoba/styled-system/patterns";
import type { ListBoxNodeInput } from "@pindoba/core-select";

const items: ListBoxNodeInput[] = [
  {
    id: "frontend",
    type: "section",
    title: "Frontend",
    items: [
      { id: "react", label: "React" },
      { id: "svelte", label: "Svelte" },
      { id: "vue", label: "Vue" },
    ],
  },
  {
    id: "backend",
    type: "section",
    title: "Backend",
    items: [
      { id: "node", label: "Node.js" },
      { id: "deno", label: "Deno" },
      { id: "bun", label: "Bun" },
    ],
  },
];

export default function GroupedDemo() {
  return (
    <div className={stack({ gap: "sm", alignItems: "flex-start" })}>
      <Select
        items={items}
        aria-label="Technology"
        placeholder="Pick a technology…"
      />
    </div>
  );
}

Pick a technology…

<script lang="ts">
  import Select from "../select.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
  import type { ListBoxNodeInput } from "@pindoba/core-select";

  const items: ListBoxNodeInput[] = [
    {
      id: "frontend",
      type: "section",
      title: "Frontend",
      items: [
        { id: "react", label: "React" },
        { id: "svelte", label: "Svelte" },
        { id: "vue", label: "Vue" },
      ],
    },
    {
      id: "backend",
      type: "section",
      title: "Backend",
      items: [
        { id: "node", label: "Node.js" },
        { id: "deno", label: "Deno" },
        { id: "bun", label: "Bun" },
      ],
    },
  ];
</script>

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Select {items} aria-label="Technology" placeholder="Pick a technology…" />
</div>

Pick a technology…

<script setup lang="ts">
import { Select } from "@pindoba/vue-select";
import type { ListBoxNodeInput } from "@pindoba/core-select";
import { stack } from "@pindoba/styled-system/patterns";

const items: ListBoxNodeInput[] = [
  {
    id: "frontend",
    type: "section",
    title: "Frontend",
    items: [
      { id: "react", label: "React" },
      { id: "svelte", label: "Svelte" },
      { id: "vue", label: "Vue" },
    ],
  },
  {
    id: "backend",
    type: "section",
    title: "Backend",
    items: [
      { id: "node", label: "Node.js" },
      { id: "deno", label: "Deno" },
      { id: "bun", label: "Bun" },
    ],
  },
];
</script>

<template>
  <div :class="stack({ gap: 'sm', alignItems: 'flex-start' })">
    <Select
      :items="items"
      aria-label="Technology"
      placeholder="Pick a technology…"
    />
  </div>
</template>

Disabled options

Mark an option disabled, or list its key in disabledKeys. Disabled options are skipped by arrow navigation and can’t be selected.

AstroReactSvelteVue

PreviewCode

Pick a framework…

---
import Select from "../select.astro";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { id: "react", label: "React" },
  { id: "svelte", label: "Svelte" },
  { id: "vue", label: "Vue", disabled: true },
  { id: "solid", label: "Solid" },
  { id: "angular", label: "Angular", disabled: true },
];
---

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Select
    id="astro-select-disabled"
    items={items}
    disabledKeys={["vue", "angular"]}
    aria-label="Framework"
    placeholder="Pick a framework…"
  />
</div>

Pick a framework…

import { Select } from "../Select";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { id: "react", label: "React" },
  { id: "svelte", label: "Svelte" },
  { id: "vue", label: "Vue", disabled: true },
  { id: "solid", label: "Solid" },
  { id: "angular", label: "Angular", disabled: true },
];

export default function DisabledDemo() {
  return (
    <div className={stack({ gap: "sm", alignItems: "flex-start" })}>
      <Select
        items={items}
        disabledKeys={["vue", "angular"]}
        aria-label="Framework"
        placeholder="Pick a framework…"
      />
    </div>
  );
}

Pick a framework…

<script lang="ts">
  import Select from "../select.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  const items = [
    { id: "react", label: "React" },
    { id: "svelte", label: "Svelte" },
    { id: "vue", label: "Vue", disabled: true },
    { id: "solid", label: "Solid" },
    { id: "angular", label: "Angular", disabled: true },
  ];
</script>

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Select
    {items}
    disabledKeys={["vue", "angular"]}
    aria-label="Framework"
    placeholder="Pick a framework…"
  />
</div>

Pick a framework…

<script setup lang="ts">
import { Select } from "@pindoba/vue-select";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { id: "react", label: "React" },
  { id: "svelte", label: "Svelte" },
  { id: "vue", label: "Vue", disabled: true },
  { id: "solid", label: "Solid" },
  { id: "angular", label: "Angular", disabled: true },
];
</script>

<template>
  <div :class="stack({ gap: 'sm', alignItems: 'flex-start' })">
    <Select
      :items="items"
      :disabledKeys="['vue', 'angular']"
      aria-label="Framework"
      placeholder="Pick a framework…"
    />
  </div>
</template>

Sizes

Three sizes via the size prop: sm, md (default), and lg.

AstroReactSvelteVue

PreviewCode

Small…

Medium…

Large…

---
import Select from "../select.astro";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { id: "react", label: "React" },
  { id: "svelte", label: "Svelte" },
  { id: "vue", label: "Vue" },
];
---

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Select
    id="astro-select-sm"
    items={items}
    size="sm"
    aria-label="Small"
    placeholder="Small…"
  />
  <Select
    id="astro-select-md"
    items={items}
    size="md"
    aria-label="Medium"
    placeholder="Medium…"
  />
  <Select
    id="astro-select-lg"
    items={items}
    size="lg"
    aria-label="Large"
    placeholder="Large…"
  />
</div>

Small…

Medium…

Large…

import { Select } from "../Select";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { id: "react", label: "React" },
  { id: "svelte", label: "Svelte" },
  { id: "vue", label: "Vue" },
];

export default function SizesDemo() {
  return (
    <div className={stack({ gap: "sm", alignItems: "flex-start" })}>
      <Select items={items} size="sm" aria-label="Small" placeholder="Small…" />
      <Select
        items={items}
        size="md"
        aria-label="Medium"
        placeholder="Medium…"
      />
      <Select items={items} size="lg" aria-label="Large" placeholder="Large…" />
    </div>
  );
}

Small…

Medium…

Large…

<script lang="ts">
  import Select from "../select.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  const items = [
    { id: "react", label: "React" },
    { id: "svelte", label: "Svelte" },
    { id: "vue", label: "Vue" },
  ];
</script>

<div class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Select {items} size="sm" aria-label="Small" placeholder="Small…" />
  <Select {items} size="md" aria-label="Medium" placeholder="Medium…" />
  <Select {items} size="lg" aria-label="Large" placeholder="Large…" />
</div>

Small…

Medium…

Large…

<script setup lang="ts">
import { Select } from "@pindoba/vue-select";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { id: "react", label: "React" },
  { id: "svelte", label: "Svelte" },
  { id: "vue", label: "Vue" },
];
</script>

<template>
  <div :class="stack({ gap: 'sm', alignItems: 'flex-start' })">
    <Select :items="items" size="sm" aria-label="Small" placeholder="Small…" />
    <Select
      :items="items"
      size="md"
      aria-label="Medium"
      placeholder="Medium…"
    />
    <Select :items="items" size="lg" aria-label="Large" placeholder="Large…" />
  </div>
</template>

Form submission

Set name and the selection posts inside a <form> via a hidden native <select> — so you also get browser autofill, native constraint validation (required), and write-back (an autofilled value updates the visible trigger). It submits exactly like a native select (one value, or repeated values for multiple). form associates the control with a <form> by id when it lives outside the form element. Very large option lists fall back to hidden <input>s.

AstroReactSvelteVue

PreviewCode

---
import Select from "../select.astro";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { id: "react", label: "React" },
  { id: "svelte", label: "Svelte" },
  { id: "vue", label: "Vue" },
];
---

<form class={stack({ gap: "sm", alignItems: "flex-start" })}>
  <Select
    id="astro-select-form"
    items={items}
    name="framework"
    defaultValue="svelte"
    aria-label="Framework"
    placeholder="Pick a framework…"
  />
  <button type="submit">Submit</button>
</form>

import { Select } from "../Select";
import { stack } from "@pindoba/styled-system/patterns";
import { useState } from "react";

const items = [
  { id: "react", label: "React" },
  { id: "svelte", label: "Svelte" },
  { id: "vue", label: "Vue" },
];

export default function FormDemo() {
  const [submitted, setSubmitted] = useState<string | null>(null);

  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    setSubmitted(data.getAll("framework").join(", ") || "none");
  }

  return (
    <form
      onSubmit={onSubmit}
      className={stack({ gap: "sm", alignItems: "flex-start" })}
    >
      <Select
        items={items}
        name="framework"
        defaultValue="svelte"
        aria-label="Framework"
        placeholder="Pick a framework…"
      />
      <button type="submit">Submit</button>
      {submitted !== null ? <p>Submitted: {submitted}</p> : null}
    </form>
  );
}

<script lang="ts">
  import Select from "../select.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  const items = [
    { id: "react", label: "React" },
    { id: "svelte", label: "Svelte" },
    { id: "vue", label: "Vue" },
  ];

  let submitted = $state<string | null>(null);

  function onSubmit(event: SubmitEvent) {
    event.preventDefault();
    const data = new FormData(event.currentTarget as HTMLFormElement);
    submitted = data.getAll("framework").join(", ") || "none";
  }
</script>

<form
  onsubmit={onSubmit}
  class={stack({ gap: "sm", alignItems: "flex-start" })}
>
  <Select
    {items}
    name="framework"
    defaultValue="svelte"
    aria-label="Framework"
    placeholder="Pick a framework…"
  />
  <button type="submit">Submit</button>
  {#if submitted !== null}<p>Submitted: {submitted}</p>{/if}
</form>

<script setup lang="ts">
import { ref } from "vue";
import { Select } from "@pindoba/vue-select";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { id: "react", label: "React" },
  { id: "svelte", label: "Svelte" },
  { id: "vue", label: "Vue" },
];

const submitted = ref<string | null>(null);

function onSubmit(event: Event) {
  event.preventDefault();
  const data = new FormData(event.currentTarget as HTMLFormElement);
  submitted.value = data.getAll("framework").join(", ") || "none";
}
</script>

<template>
  <form
    :class="stack({ gap: 'sm', alignItems: 'flex-start' })"
    @submit="onSubmit"
  >
    <Select
      :items="items"
      name="framework"
      defaultValue="svelte"
      aria-label="Framework"
      placeholder="Pick a framework…"
    />
    <button type="submit">Submit</button>
    <p v-if="submitted !== null">Submitted: {{ submitted }}</p>
  </form>
</template>

Labeling

The trigger is a <div role="combobox"> (not a labelable element), so the consumer id lands on the hidden native <select> instead. That makes a plain <label for={id}> focus the Select — clicking the label focuses the trigger and paints the ring, without needing the Field wrapper. It focuses the trigger but does not open the dropdown, matching a native <select> in Chrome. Add aria-labelledby pointing at the same label so the role="combobox" trigger gets its screen-reader name (or use Field, which wires both for you).

AstroReactSvelteVue

PreviewCode

Framework

Pick one…

---
import Select from "../select.astro";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { id: "react", label: "React" },
  { id: "svelte", label: "Svelte" },
  { id: "vue", label: "Vue" },
];

// The consumer `id` lands on the hidden native <select>, so a plain
// `<label for={id}>` focuses the control (no <Field> needed). `aria-labelledby`
// points the trigger at the same label for the screen-reader name.
const id = "astro-select-labeled";
---

<div class={stack({ gap: "2xs", alignItems: "flex-start" })}>
  <label for={id} id={`${id}-label`}>Framework</label>
  <Select
    id={id}
    items={items}
    aria-labelledby={`${id}-label`}
    placeholder="Pick one…"
  />
</div>

Framework

Pick one…

import { Select } from "../Select";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { id: "react", label: "React" },
  { id: "svelte", label: "Svelte" },
  { id: "vue", label: "Vue" },
];

// The consumer `id` lands on the hidden native <select>, so a plain
// `<label htmlFor={id}>` focuses the control (no <Field> needed). `aria-labelledby`
// points the trigger at the same label for the screen-reader name.
const id = "react-select-labeled";

export default function LabeledDemo() {
  return (
    <div className={stack({ gap: "2xs", alignItems: "flex-start" })}>
      <label htmlFor={id} id={`${id}-label`}>
        Framework
      </label>
      <Select
        id={id}
        items={items}
        aria-labelledby={`${id}-label`}
        placeholder="Pick one…"
      />
    </div>
  );
}

Framework

Pick one…

<script lang="ts">
  import Select from "../select.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  const items = [
    { id: "react", label: "React" },
    { id: "svelte", label: "Svelte" },
    { id: "vue", label: "Vue" },
  ];

  // The consumer `id` lands on the hidden native <select>, so a plain
  // `<label for={id}>` focuses the control (no <Field> needed). `aria-labelledby`
  // points the trigger at the same label for the screen-reader name.
  const id = "svelte-select-labeled";
</script>

<div class={stack({ gap: "2xs", alignItems: "flex-start" })}>
  <label for={id} id="{id}-label">Framework</label>
  <Select {id} {items} aria-labelledby="{id}-label" placeholder="Pick one…" />
</div>

Framework

Pick one…

<script setup lang="ts">
import { Select } from "@pindoba/vue-select";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { id: "react", label: "React" },
  { id: "svelte", label: "Svelte" },
  { id: "vue", label: "Vue" },
];

// The consumer `id` lands on the hidden native <select>, so a plain
// `<label for={id}>` focuses the control (no <Field> needed). `aria-labelledby`
// points the trigger at the same label for the screen-reader name.
const id = "vue-select-labeled";
</script>

<template>
  <div :class="stack({ gap: '2xs', alignItems: 'flex-start' })">
    <label :for="id" :id="`${id}-label`">Framework</label>
    <Select
      :id="id"
      :items="items"
      :aria-labelledby="`${id}-label`"
      placeholder="Pick one…"
    />
  </div>
</template>

Keyboard

Focus stays on the trigger throughout.

Key	Action
`↓` / `↑`	Open the popup (when closed), then move the active option
`Enter` / `Space`	Open the popup, or select the active option
`Home` / `End`	Jump to the first / last option
Type a letter	Open the popup and jump to a matching option (typeahead)
`Escape`	Close the popup (focus stays on the trigger)
`Backspace`	Remove the last chip (multiselect)
`Tab`	Move focus away and close the popup

Accessibility

The trigger is a role="combobox" with aria-haspopup="listbox", aria-expanded, and aria-controls (the listbox id).
The active option is surfaced via aria-activedescendant; DOM focus never leaves the trigger.
The popup is a role="listbox" of role="option" rows with aria-selected.
The clear button is labelled and removed from the tab order (tabindex="-1"); chip remove buttons are labelled Remove <value>.

#Default

#Multiple selection

#Chip overflow

#Preselected & clearable

#Leading content

#Sections

#Disabled options

#Sizes

#Form submission

#Labeling

#Keyboard

#Accessibility

Default

Multiple selection

Chip overflow

Preselected & clearable

Leading content

Sections

Disabled options

Sizes

Form submission

Labeling

Keyboard

Accessibility