A custom select dropdown with grouped options, descriptions, leading icons and animated open states. Built on Base UI for keyboard and screen reader support in forms, filters and settings.
"use client";
import * as React from "react";
import { IconCloud, IconGlobe, IconMapPin } from "@tabler/icons-react";
import { Select } from "@/components/ui/select";
function PreviewColumn({
children,
className,
}: {
children: React.ReactNode;
className?: string;
}) {
return (
<div className={["w-full max-w-[20rem] px-4", className].filter(Boolean).join(" ")}>
{children}
</div>
);
}
const regionOptions = [
{
value: "iad",
label: "US East",
description: "Virginia, low latency for North America.",
leading: <IconMapPin stroke={1.75} />,
trailing: "IAD",
},
{
value: "fra",
label: "Europe",
description: "Frankfurt, balanced coverage for EU users.",
leading: <IconGlobe stroke={1.75} />,
trailing: "FRA",
},
{
value: "sin",
label: "Asia Pacific",
description: "Singapore, close to APAC traffic.",
leading: <IconCloud stroke={1.75} />,
trailing: "SIN",
},
];
export function SelectPreview() {
return (
<PreviewColumn>
<Select
label="Region"
placeholder="Choose region"
defaultValue="fra"
options={regionOptions}
/>
</PreviewColumn>
);
}
export default function Demo() {
return <SelectPreview />;
}