Select

Forms

About

An accessible dropdown select built on Radix UI's Select primitive, with keyboard navigation, typeahead and a labeled trigger for choosing one option from a list in a form.

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

import Select from "@/components/ui/select";

export default function SelectDemo() {
  return (
    <div className="flex min-h-[200px] w-full items-center justify-center rounded-lg border border-[var(--ui-border)] bg-[var(--ui-bg)] p-10">
      <Select
        label="Timezone"
        defaultValue="utc"
        options={[
          { value: "utc", label: "UTC" },
          { value: "est", label: "Eastern (US)" },
          { value: "pst", label: "Pacific (US)" },
        ]}
      />
    </div>
  );
}