Select

Picks one option from a list that opens over the page. Its list follows the nearest VillageScope.

Installation

npx rasengan-ui add select

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/select.json

Usage

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 
const villages = { konoha: "Konoha", kiri: "Kiri", iwa: "Iwa" };
 
export function VillagePicker() {
  return (
    <Select items={villages} defaultValue="konoha">
      <SelectTrigger aria-label="Village">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="konoha">Konoha</SelectItem>
        <SelectItem value="kiri">Kiri</SelectItem>
        <SelectItem value="iwa">Iwa</SelectItem>
      </SelectContent>
    </Select>
  );
}

Variants

The trigger takes the input's variants, default, filled and underline, so a form mixing both looks of a piece. ghost has no border or fill until it is hovered or open, for a select in a toolbar or a table header.

<SelectTrigger variant="ghost" aria-label="Sort by">
  <SelectValue />
</SelectTrigger>

Sizes

sm, default and lg on the trigger, at the village's control heights. Inside a Field, the trigger takes the Field's size and variant.

Labels in the trigger

Pass items (value → label) to the Select, so the trigger shows the selected option's label before the list has ever opened. Without it, the trigger shows the raw value until then.

Groups

SelectGroup with a SelectLabel, and SelectSeparator between groups. A disabled item stays visible but can't be picked.

Villages

The trigger is an input; the list is a popover surface (glass in Kiri, hard-shadowed in Iwa) with the village's highlight.

Accessibility

• The trigger is a combobox button: name it with aria-label or a Field's label.
• Arrow keys move the highlight, typing jumps to a matching option, Enter picks, Esc closes.
• The list renders in a portal on <body>, inside the nearest VillageScope's twin, so it wears the right village.

API reference

The parts of Base UI's Select, styled:

selectTriggerVariants({ variant, size }) returns the trigger's classes.