A styled select dropdown built on React Aria Components with a field label, description, and popover list box for accessible option selection.
"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>
);
}