A dropdown control for picking one value from a list of options, with a native-select mode and a custom listbox mode that supports option details, keyboard type-ahead, and smart up/down flipping.
"use client";
import Select from "@/components/ui/select";
export default function SelectDemo() {
const offices = [
{ value: "seoul", label: "Seoul", detail: "McKinley Rice, headquarters" },
{ value: "noida", label: "Noida", detail: "Redrob Creativity, India" },
{ value: "ny", label: "New York", detail: "Redrob Inc., United States" },
];
const jobs = [
"Lawyer",
"Accountant",
"Recruiter",
"HR",
"Founder",
"Sales",
"Marketer",
"Consultant",
"Investor",
"Product manager",
"Engineer",
];
return (
<div
style={{
display: "flex",
gap: 16,
alignItems: "flex-start",
flexWrap: "wrap",
padding: 24,
background: "var(--surface-base)",
color: "var(--ink-primary)",
}}
>
<Select
label="Office"
options={offices}
defaultValue="seoul"
style={{ width: 240 }}
/>
<Select
label="Show examples for"
options={jobs}
placeholder="Choose a profession"
hint="Ten professions. The list scrolls."
style={{ width: 240 }}
/>
<Select
label="Locked"
options={offices}
disabled
defaultValue="ny"
style={{ width: 180 }}
/>
</div>
);
}