Select (native)

A thin wrapper around the native <select> element with tone 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.

Tone

Apply semantic tone colors to indicate validation state or context.

PreviewCode

---
// GENERATED from packages/demos/select-native/tone.demo.tsx — edit the source, not this file.
import SelectNative from "@pindoba/astro-select-native";
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" })}>
  <SelectNative tone="neutral" items={items} />
  <SelectNative tone="primary" items={items} />
  <SelectNative tone="success" items={items} />
  <SelectNative tone="danger" items={items} />
  <SelectNative tone="warning" items={items} />
</div>

// GENERATED from packages/demos/select-native/tone.demo.tsx — edit the source, not this file.
import { SelectNative } from "@pindoba/react-select-native";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
];
export default function ToneDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <SelectNative tone="neutral" items={items} />
      <SelectNative tone="primary" items={items} />
      <SelectNative tone="success" items={items} />
      <SelectNative tone="danger" items={items} />
      <SelectNative tone="warning" items={items} />
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/select-native/tone.demo.tsx — edit the source, not this file.
  import SelectNative from "@pindoba/svelte-select-native";
  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" })}>
  <SelectNative tone="neutral" {items}></SelectNative>
  <SelectNative tone="primary" {items}></SelectNative>
  <SelectNative tone="success" {items}></SelectNative>
  <SelectNative tone="danger" {items}></SelectNative>
  <SelectNative tone="warning" {items}></SelectNative>
</div>

<script setup lang="ts">
// GENERATED from packages/demos/select-native/tone.demo.tsx — edit the source, not this file.
import { SelectNative } from "@pindoba/vue-select-native";
import { stack } from "@pindoba/styled-system/patterns";

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

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

// GENERATED from packages/demos/select-native/tone.demo.tsx — edit the source, not this file.
import { SelectNative } from "@pindoba/solid-select-native";
import { stack } from "@pindoba/styled-system/patterns";

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
];
export default function ToneDemo() {
  return (
    <div class={stack({ gap: "md", direction: "column" })}>
      <SelectNative tone="neutral" items={items} />
      <SelectNative tone="primary" items={items} />
      <SelectNative tone="success" items={items} />
      <SelectNative tone="danger" items={items} />
      <SelectNative tone="warning" items={items} />
    </div>
  );
}

Size

PreviewCode

---
// GENERATED from packages/demos/select-native/size.demo.tsx — edit the source, not this file.
import SelectNative from "@pindoba/astro-select-native";
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" })}>
  <SelectNative size="sm" items={items} />
  <SelectNative size="md" items={items} />
  <SelectNative size="lg" items={items} />
</div>

// GENERATED from packages/demos/select-native/size.demo.tsx — edit the source, not this file.
import { SelectNative } from "@pindoba/react-select-native";
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">
  // GENERATED from packages/demos/select-native/size.demo.tsx — edit the source, not this file.
  import SelectNative from "@pindoba/svelte-select-native";
  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" })}>
  <SelectNative size="sm" {items}></SelectNative>
  <SelectNative size="md" {items}></SelectNative>
  <SelectNative size="lg" {items}></SelectNative>
</div>

<script setup lang="ts">
// GENERATED from packages/demos/select-native/size.demo.tsx — edit the source, not this file.
import { SelectNative } from "@pindoba/vue-select-native";
import { stack } from "@pindoba/styled-system/patterns";

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

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

// GENERATED from packages/demos/select-native/size.demo.tsx — edit the source, not this file.
import { SelectNative } from "@pindoba/solid-select-native";
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 class={stack({ gap: "md", direction: "column" })}>
      <SelectNative size="sm" items={items} />
      <SelectNative size="md" items={items} />
      <SelectNative size="lg" items={items} />
    </div>
  );
}

Custom Styling

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

PreviewCode

---
// GENERATED from packages/demos/select-native/custom.demo.tsx — edit the source, not this file.
import SelectNative from "@pindoba/astro-select-native";
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" })}>
  <SelectNative
    items={items}
    passThrough={{
      root: { style: { borderRadius: "full" } },
    }}
  />
  <SelectNative
    items={items}
    passThrough={{
      select: { style: { fontStyle: "italic" } },
    }}
  />
</div>

// GENERATED from packages/demos/select-native/custom.demo.tsx — edit the source, not this file.
import { SelectNative } from "@pindoba/react-select-native";
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">
  // GENERATED from packages/demos/select-native/custom.demo.tsx — edit the source, not this file.
  import SelectNative from "@pindoba/svelte-select-native";
  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" })}>
  <SelectNative
    {items}
    passThrough={{
      root: { style: { borderRadius: "full" } },
    }}
  ></SelectNative>
  <SelectNative
    {items}
    passThrough={{
      select: { style: { fontStyle: "italic" } },
    }}
  ></SelectNative>
</div>

<script setup lang="ts">
// GENERATED from packages/demos/select-native/custom.demo.tsx — edit the source, not this file.
import { SelectNative } from "@pindoba/vue-select-native";
import { stack } from "@pindoba/styled-system/patterns";

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

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

// GENERATED from packages/demos/select-native/custom.demo.tsx — edit the source, not this file.
import { SelectNative } from "@pindoba/solid-select-native";
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 class={stack({ gap: "md", direction: "column" })}>
      <SelectNative
        items={items}
        passThrough={{
          root: { style: { borderRadius: "full" } },
        }}
      />
      <SelectNative
        items={items}
        passThrough={{
          select: { style: { fontStyle: "italic" } },
        }}
      />
    </div>
  );
}

#Tone

#Size

#Custom Styling

Tone

Size

Custom Styling