Select (native)

A thin wrapper around the native <select> element with feedback color states, size variants, and prefix/suffix customization via passThrough. For a fully-styled, ListBox-powered select with multi-select chips and search-free option navigation, see Select.

Feedback

Apply semantic feedback colors to indicate validation state or context.

AstroReactSvelteVue

PreviewCode

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

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
];
---

<div class={stack({ gap: "md", direction: "column" })}>
  <Select feedback="neutral" items={items} />
  <Select feedback="primary" items={items} />
  <Select feedback="success" items={items} />
  <Select feedback="danger" items={items} />
  <Select feedback="warning" items={items} />
</div>

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

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
];

export default function FeedbackDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <SelectNative feedback="neutral" items={items} />
      <SelectNative feedback="primary" items={items} />
      <SelectNative feedback="success" items={items} />
      <SelectNative feedback="danger" items={items} />
      <SelectNative feedback="warning" items={items} />
    </div>
  );
}

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

  const items = [
    { label: "Apple", value: "apple" },
    { label: "Banana", value: "banana" },
    { label: "Cherry", value: "cherry" },
  ];
</script>

<div class={stack({ gap: "md", direction: "column" })}>
  <Select feedback="neutral" {items} />
  <Select feedback="primary" {items} />
  <Select feedback="success" {items} />
  <Select feedback="danger" {items} />
  <Select feedback="warning" {items} />
</div>

<script setup lang="ts">
import { SelectNative } from "@pindoba/vue-select-native";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "md", direction: "column" });
const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
];
</script>

<template>
  <div :class="col">
    <SelectNative feedback="neutral" :items="items" />
    <SelectNative feedback="primary" :items="items" />
    <SelectNative feedback="success" :items="items" />
    <SelectNative feedback="danger" :items="items" />
    <SelectNative feedback="warning" :items="items" />
  </div>
</template>

Size

AstroReactSvelteVue

PreviewCode

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

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
];
---

<div class={stack({ gap: "md", direction: "column" })}>
  <Select size="sm" items={items} />
  <Select size="md" items={items} />
  <Select size="lg" items={items} />
</div>

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

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
];

export default function SizeDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <SelectNative size="sm" items={items} />
      <SelectNative size="md" items={items} />
      <SelectNative size="lg" items={items} />
    </div>
  );
}

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

  const items = [
    { label: "Apple", value: "apple" },
    { label: "Banana", value: "banana" },
    { label: "Cherry", value: "cherry" },
  ];
</script>

<div class={stack({ gap: "md", direction: "column" })}>
  <Select size="sm" {items} />
  <Select size="md" {items} />
  <Select size="lg" {items} />
</div>

<script setup lang="ts">
import { SelectNative } from "@pindoba/vue-select-native";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "md", direction: "column" });
const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
];
</script>

<template>
  <div :class="col">
    <SelectNative size="sm" :items="items" />
    <SelectNative size="md" :items="items" />
    <SelectNative size="lg" :items="items" />
  </div>
</template>

Custom Styling

The passThrough prop provides escape hatches for each slot: style accepts a Panda CSS SystemStyleObject and props forwards arbitrary HTML attributes.

AstroReactSvelteVue

PreviewCode

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

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
];
---

<div class={stack({ gap: "md", direction: "column" })}>
  <Select
    items={items}
    passThrough={{
      root: { style: { borderRadius: "full" } },
    }}
  />
  <Select
    items={items}
    passThrough={{
      select: { style: { fontStyle: "italic" } },
    }}
  />
</div>

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

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
];

export default function CustomDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <SelectNative
        items={items}
        passThrough={{
          root: { style: { borderRadius: "full" } },
        }}
      />
      <SelectNative
        items={items}
        passThrough={{
          select: { style: { fontStyle: "italic" } },
        }}
      />
    </div>
  );
}

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

  const items = [
    { label: "Apple", value: "apple" },
    { label: "Banana", value: "banana" },
    { label: "Cherry", value: "cherry" },
  ];
</script>

<div class={stack({ gap: "md", direction: "column" })}>
  <Select
    {items}
    passThrough={{
      root: { style: { borderRadius: "full" } },
    }}
  />
  <Select
    {items}
    passThrough={{
      select: { style: { fontStyle: "italic" } },
    }}
  />
</div>

<script setup lang="ts">
import { SelectNative } from "@pindoba/vue-select-native";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "md", direction: "column" });
const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
];
</script>

<template>
  <div :class="col">
    <SelectNative
      :items="items"
      :passThrough="{ root: { style: { borderRadius: 'full' } } }"
    />
    <SelectNative
      :items="items"
      :passThrough="{ select: { style: { fontStyle: 'italic' } } }"
    />
  </div>
</template>

props · 6 shown · 6 total

svelte react astro

required only

background

"surface.peak""surface.hill""surface.base""surface.valley""surface.ground""transparent"

default "sunken"

Background fill for the select wrapper.

border

"none""bold""default""muted""accent"

Border style for the select wrapper.

feedback

"primary""neutral""success""warning""danger""inherit"

default "neutral"

Semantic feedback color scheme. `neutral` is the default, `primary` uses the primary color, `success` green, `danger` red, and `warning` orange.

passThrough

SelectPassThrough< RootElementAttributes, SelectElementAttributes, OptionElementAttributes >

Per-slot style and attribute override bag. Each slot accepts a Panda `style` object and arbitrary HTML `props`.

radius

"sm""md""lg""xl""2xl""none""xs""3xl""4xl""5xl""6xl""full""2xs""inner""inherit"

Corner radius override. Without it the corner follows the size tier. `inner` renders a concentric corner computed from the nearest parent panel (parent radius − parent padding, floored at `xs`).

size

"sm""md""lg"

default "md"

Size variant of the select. `sm` is small, `md` is the default, and `lg` is large.

Plus all standard <select> HTML attributes.

#Feedback

#Size

#Custom Styling

Feedback

Size

Custom Styling