Components

Blocks

  1. Select
    1. Feedback
    2. Size
    3. Custom Styling
    4. Props
component

Select

A native select component with feedback color states, size variants, and prefix/suffix customization via passThrough.

Feedback

Apply semantic feedback colors to indicate validation state or context.

 
---
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>

Size

 
---
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>

Custom Styling

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

 
---
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>

Props

props · 6 total
prop type default req description
feedback "neutral""primary""success""danger""warning" "neutral" Semantic feedback color scheme. neutral: Default. primary: Primary color. success: Green. danger: Red. warning: Orange.
size "sm""md""lg" "md" Size variant. sm: Small. md: Default. lg: Large.
background "sunken""surface" "sunken" Background fill for the select wrapper.
items Array<{ label: string; value?: string; disabled?: boolean }> - Array of options to display in the select.
passThrough { root?: { style?: SystemStyleObject; props?: Record<string, unknown> }; select?: { style?: SystemStyleObject; props?: Record<string, unknown> }; option?: { style?: SystemStyleObject; props?: Record<string, unknown> } } undefined Custom styling and props for each slot of the select.
...rest HTMLAttributes<HTMLSelectElement> - Standard HTML select attributes passed to the inner select element.