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 SelectErrorDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6 bg-background p-6 text-foreground">
      <Select
        label="Plan"
        error="Please choose a plan to continue."
        hasEmpty
        options={[
          { label: "Starter", value: "starter" },
          { label: "Pro", value: "pro" },
          { label: "Enterprise", value: "enterprise" },
        ]}
        required
      />
    </div>
  );
}