Select

Forms

About

An accessible native dropdown field with a label, description, validation error, required mark and optional prefix/suffix adornments or grouped options.

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 w-full max-w-sm flex-col gap-6 bg-background p-6 text-foreground">
      <Select
        label="Country"
        description="Used to calculate shipping and taxes."
        hasEmpty
        options={[
          { label: "United States", value: "us" },
          { label: "Canada", value: "ca" },
          { label: "Germany", value: "de" },
          { label: "France", value: "fr" },
          { label: "Japan", value: "jp" },
        ]}
        required
      />
    </div>
  );
}