Select

A dropdown select built on React Aria - the trigger matches the Figma surface 1:1, the popover is non-modal so the page keeps scrolling, and items accept free-form content like status dots and avatars.

Installation

You can add this select component using our CLI or manually:

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

CLI

Manual

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add select

With status dot

Items render arbitrary children next to the label - always pass textValue so typeahead and the trigger label stay correct.

import { StatusDot } from "@/components/base/badges/status-dot";
{/* Items take free-form content - dots, avatars, icons */}<Select aria-label="Purchase status" defaultSelectedKey="completed" className="w-[142px]">  <SelectItem id="completed" textValue="Completed">    <StatusDot color="green" />    Completed  </SelectItem>  <SelectItem id="waiting" textValue="Waiting">    <StatusDot color="yellow" />    Waiting  </SelectItem>  <SelectItem id="processing" textValue="Processing">    <StatusDot color="indigo" />    Processing  </SelectItem></Select>