component

Select (native)

props · 11 shown · 11 total

Appearance

  • "transparent" "surface.peak" "surface.hill" "surface.base" "surface.valley" "surface.ground"
    default "sunken"

    Background fill for the select wrapper.

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

    Border style for the select wrapper.

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

    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 `2xs`).

  • "lg" "md" "sm" "xs"
    default "md"

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

  • "inherit" "cyan" "danger" "dynamic" "mauve" "neutral" "pink" "primary" "sage" "slate" "stone" "success" "teal" "violet" "warning"
    default "neutral"

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

Layout

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

    Border radius for the bottom-left and bottom-right corners.

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

    Border radius for the top-left and bottom-left corners.

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

    Border radius for the top-right and bottom-right corners.

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

    Border radius for the top-left and top-right corners. Overrides `radius` on those corners only (flush-edge chains).

Advanced

  • SelectPassThrough< RootElementAttributes, SelectElementAttributes, OptionElementAttributes >

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

  • boolean
    default false

    Astro / vanilla: serialize the props into `data-select-native-config` so the client runtime hydrates this instance and `getPindoba(el, "select-native")` can `update()` it. Frameworks with their own reactivity don't need it.

Plus all standard <select> HTML attributes.

Type

  • Components
  • Blocks