Select

InstallationCopy Anchor Link

{
  "registries": {
    "@rabtx": "http://localhost:3002/r/{name}.json"
  }
}

npx shadcn@latest add @rabtx/select

npx shadcn@latest add http://localhost:3002/r/select.json

UsageCopy Anchor Link

Installed from the registry, import from @/components/ui/select; inside this monorepo, from @rabtx/ui/select.

import { Select, SelectItem } from "@rabtx/ui/select";

export function FrameworkPicker() {
  const [framework, setFramework] = useState("");
  return (
    <Select
      aria-label="Framework"
      placeholder="Pick a framework"
      value={framework}
      onValueChange={setFramework}
    >
      <SelectItem value="next">Next.js</SelectItem>
      <SelectItem value="astro">Astro</SelectItem>
    </Select>
  );
}

It is a real <select>, so the browser provides the keyboard (arrows, Home, End, typeahead, Escape), the form value, screen reader semantics and the picker on phones. Where the browser has the customizable select (appearance: base-select), the list is drawn and animated by the package's CSS. Everywhere else the system list opens, and the trigger looks the same.

IconsCopy Anchor Link

leadingIcon sits before the value. An item's icon shows in the styled list; a system list shows the label alone.

Groups and separatorsCopy Anchor Link

SelectGroup is an <optgroup> with a label; SelectSeparator is an <hr>.

Error and disabledCopy Anchor Link

Inside a Field, error turns the edge red and links the message. Items and the whole select can be disabled.

ControlledCopy Anchor Link

Plain optionsCopy Anchor Link

SelectItem renders an <option>, so plain options work too, and name puts the value in a form.

PlacementCopy Anchor Link

Just before the list opens, the select checks whether it fits below. If it does not and there is more room above, it opens above and every motion mirrors: it unfolds upward and the top corners pinch. Scroll this example to the bottom of the window and open it.

APICopy Anchor Link

Select takes everything a native <select> takes, except size and multiple, plus:

SelectItem takes value, disabled and icon. SelectGroup takes a label.

Outside React, the class names are exported from @rabtx/ui/select/styles:

<div class="rx-select-field rx-select-md">
  <select class="rx-select" aria-label="Team">
    <option>Design</option>
  </select>
  <span class="rx-select-chevron" aria-hidden="true"></span>
</div>

ThemingCopy Anchor Link

The Select reads only the theme tokens.

How the motion worksCopy Anchor Link

Browser supportCopy Anchor Link

• Customizable select (Chromium 135+): the styled, animated list, item icons, ticks and the side-aware unfold.
• Everywhere else: the system list. The trigger, sizes, placeholder color, focus, error, disabled, leading icon and keyboard are the same. Item icons are left out, and so is the motion.
• Item icons render only after hydration, so server HTML is identical in every browser.

AccessibilityCopy Anchor Link

• A native select: its role, its options and their states are exposed by the browser.
• Focus shows a blue edge and a soft ring. Label it with Field or an aria-label.
• Reduced motion keeps a 120ms fade; data-motion="off" opens and closes at once.