Select

Forms

About

A styled select dropdown built on React Aria Components with a field label, description, and popover list box for accessible option selection.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Select to your project and fits it to your theme.

Code

How Select is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { Select, SelectButton, SelectValue } from "@/components/ui/oui-select";
import * as Rac from "react-aria-components";

const departments = [
  "Engineering",
  "Design",
  "Marketing",
  "Sales",
  "Customer Support",
  "Human Resources",
  "Finance",
  "Operations",
];

export default function Component() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-2">
      <Select placeholder="Choose department">
        <Rac.Label className="text-sm font-medium">Department</Rac.Label>
        <SelectButton className="w-full">
          <SelectValue />
        </SelectButton>
        <Rac.Text slot="description" className="text-sm text-muted-foreground">
          Select your department or area of work.
        </Rac.Text>
        <Rac.Popover className="min-w-(--trigger-width) rounded-md border border-border bg-popover text-popover-foreground shadow-md outline-none">
          <Rac.ListBox className="max-h-72 overflow-auto p-1 outline-none">
            {departments.map((item) => (
              <Rac.ListBoxItem
                key={item}
                className="flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none data-focused:bg-accent data-focused:text-accent-foreground data-selected:font-medium"
              >
                {item}
              </Rac.ListBoxItem>
            ))}
          </Rac.ListBox>
        </Rac.Popover>
      </Select>
    </div>
  );
}