Select

Built on the Radix Select primitive, which handles item-aligned positioning (it measures the selected item and shifts the panel so that item sits over the trigger), typeahead, scroll buttons, the hidden native `<select>` for forms and the `--radix-select-*` variables. `SelectContent` portals the panel, caps its height with `--radix-select-content-available-height` and sets `transform-origin` from `--radix-select-content-transform-origin`. In popper mode the panel is offset from the trigger by side, and the viewport is sized from `--radix-select-trigger-height` / `--radix-select-trigger-width` so it is never narrower than the trigger. Surfaces use `bg-card` (there is no popover or input token); the value span is single-line clamped. The Pebble note below gives the current trigger and panel recipe. Animation is one keyframe, `select-in` (opacity 0, scale .95 to 1), shipped in the registry item's `css` and keyed on `data-state=open` under `motion-safe:`. There is no exit keyframe because Radix Select unmounts its content immediately on close. Size names follow this library (`sm`/`md`) rather than the source's `sm`/`default`.

**Pebble (2026-11-03).** The trigger is a recessed field: `bg-card`, `border-border-control`, `inset-shadow-xs`, `rounded-md`, `md` now `h-9` (was `h-10`), a `bg-muted/50` hover, `border-ring` and an ink chevron while open, and the shared focus-ring recipe; colours ease over `--motion-fast`. The panel is a raised Pebble surface: `rounded-lg`, `ring-1 ring-hairline`, `shadow-raised-md`, `inset-shadow-highlight`, no border; popper offset is 6 px. Rows are `min-h-8` with a `bg-muted` + ink highlight; ember is reserved for the check (`text-accent`), and the selected row is medium weight. Radix `ItemText` drops `className`, so the item lays out its last child (the text span) with `*:last:flex *:last:items-center *:last:gap-2`, letting avatars or dots sit inline before the label in both the list and the trigger. `select-in` keeps its name and body but runs on tokens (`--motion-base` + `--motion-enter`). The demo is a ticket-routing card: owner (avatars, an away teammate disabled, a group label), priority (popper, coloured SVG dots, a separator), an empty milestone, a required area in its invalid state with an error message, plus small and disabled footer selects.

<!-- PEBBLE-LICENSE -->

registry/input/select/select.tsx

"use client";

/* PEBBLE-LICENSE
Built by Pebble. Component: select.

First-party license: MIT

The following first-party terms apply only to original Pebble material.

MIT License

Copyright (c) 2026 Praxys Solutions LLC (Pebble)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

THIRD-PARTY NOTICES
These notices apply to identified upstream portions; Pebble terms do not replace or narrow their rights.

Upstream: https://raw.githubusercontent.com/shadcn-ui/ui/main/LICENSE.md
MIT License

Copyright (c) 2023 shadcn

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
END PEBBLE-LICENSE */

import * as React from "react";
import { Select as SelectPrimitive } from "radix-ui";

import { cn } from "@/lib/utils";

function Chevron({ direction, className }: { direction: "up" | "down"; className?: string }) {
  return (
    <svg
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      className={cn("size-4", className)}
    >
      <path d={direction === "down" ? "m4 6 4 4 4-4" : "m4 10 4-4 4 4"} />
    </svg>
  );
}

const sizes = {
  sm: "h-8 px-2.5",
  md: "h-9 px-3",
} as const;

export function Select(props: React.ComponentProps<typeof SelectPrimitive.Root>) {
  return <SelectPrimitive.Root data-slot="select" {...props} />;
}

export function SelectGroup(props: React.ComponentProps<typeof SelectPrimitive.Group>) {
  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
}

export function SelectValue(props: React.ComponentProps<typeof SelectPrimitive.Value>) {
  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
}

export type SelectTriggerProps = React.ComponentProps<typeof SelectPrimitive.Trigger> & {
  size?: keyof typeof sizes;
};

export function SelectTrigger({ size = "md", className, children, ...props }: SelectTriggerProps) {
  return (
    <SelectPrimitive.Trigger
      data-slot="select-trigger"
      data-size={size}
      className={cn(
        "group/select flex w-fit items-center justify-between gap-2 rounded-md border border-border-control bg-card text-sm whitespace-nowrap inset-shadow-xs transition-[color,background-color,border-color,box-shadow] duration-(--motion-fast) ease-enter outline-none motion-reduce:transition-none",
        "enabled:hover:bg-muted/50 data-placeholder:text-muted-foreground data-[state=open]:border-ring",
        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-hidden",
        "aria-invalid:border-danger aria-invalid:ring-2 aria-invalid:ring-danger/20 aria-invalid:focus-visible:ring-danger aria-invalid:data-[state=open]:border-danger",
        "disabled:cursor-not-allowed disabled:opacity-50",
        "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        "forced-colors:border-[CanvasText]",
        sizes[size],
        className,
      )}
      {...props}
    >
      {children}
      <SelectPrimitive.Icon asChild>
        <Chevron
          direction="down"
          className="text-muted-foreground transition-colors duration-(--motion-fast) group-data-[state=open]/select:text-foreground motion-reduce:transition-none"
        />
      </SelectPrimitive.Icon>
    </SelectPrimitive.Trigger>
  );
}

export function SelectScrollUpButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
  return (
    <SelectPrimitive.ScrollUpButton
      data-slot="select-scroll-up-button"
      className={cn(
        "flex cursor-default items-center justify-center py-1 text-muted-foreground",
        className,
      )}
      {...props}
    >
      <Chevron direction="up" />
    </SelectPrimitive.ScrollUpButton>
  );
}

export function SelectScrollDownButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
  return (
    <SelectPrimitive.ScrollDownButton
      data-slot="select-scroll-down-button"
      className={cn(
        "flex cursor-default items-center justify-center py-1 text-muted-foreground",
        className,
      )}
      {...props}
    >
      <Chevron direction="down" />
    </SelectPrimitive.ScrollDownButton>
  );
}

export function SelectContent({
  className,
  children,
  position = "item-aligned",
  align = "center",
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
  const popper = position === "popper";
  return (
    <SelectPrimitive.Portal>
      <SelectPrimitive.Content
        data-slot="select-content"
        position={position}
        align={align}
        className={cn(
          "relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-card text-card-foreground shadow-raised-md ring-1 inset-shadow-highlight ring-hairline forced-colors:border forced-colors:border-[CanvasText]",
          // Enter only: Radix Select unmounts its content as soon as it
          // closes, so an exit keyframe would never be seen.
          "motion-safe:data-[state=open]:animate-[select-in_var(--motion-base)_var(--motion-enter)]",
          popper &&
            "data-[side=bottom]:translate-y-1.5 data-[side=left]:-translate-x-1.5 data-[side=right]:translate-x-1.5 data-[side=top]:-translate-y-1.5",
          className,
        )}
        {...props}
      >
        <SelectScrollUpButton />
        <SelectPrimitive.Viewport
          data-slot="select-viewport"
          className={cn(
            "p-1",
            popper &&
              "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1",
          )}
        >
          {children}
        </SelectPrimitive.Viewport>
        <SelectScrollDownButton />
      </SelectPrimitive.Content>
    </SelectPrimitive.Portal>
  );
}

export function SelectLabel({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
  return (
    <SelectPrimitive.Label
      data-slot="select-label"
      className={cn("px-2 pt-2 pb-1 text-xs font-medium text-muted-foreground", className)}
      {...props}
    />
  );
}

export function SelectItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
  return (
    <SelectPrimitive.Item
      data-slot="select-item"
      className={cn(
        "relative flex min-h-8 w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm transition-colors duration-(--motion-fast) ease-enter outline-none select-none motion-reduce:transition-none",
        "focus:bg-muted focus:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-[state=checked]:font-medium",
        "forced-colors:focus:outline-2 forced-colors:focus:outline-[Highlight] forced-colors:focus:outline-solid",
        // Radix drops className on ItemText, so lay it out from here: icons,
        // dots and avatars sit inline with the label.
        "*:last:flex *:last:min-w-0 *:last:items-center *:last:gap-2",
        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
        className,
      )}
      {...props}
    >
      <span
        data-slot="select-item-indicator"
        className="absolute right-2 flex size-4 items-center justify-center text-accent"
      >
        <SelectPrimitive.ItemIndicator>
          <svg
            viewBox="0 0 16 16"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            aria-hidden="true"
            className="size-4 text-current"
          >
            <path d="m3.5 8.5 3 3 6-7" />
          </svg>
        </SelectPrimitive.ItemIndicator>
      </span>
      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
    </SelectPrimitive.Item>
  );
}

export function SelectSeparator({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
  return (
    <SelectPrimitive.Separator
      data-slot="select-separator"
      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
      {...props}
    />
  );
}