Select

Forms

About

A dropdown select input for choosing one value from a list of string or value/label options, with keyboard navigation, type-ahead and small/medium/large sizes.

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";
import { useState } from "react";

export default function SelectSizesDemo() {
  const [range, setRange] = useState("Last 7 days");
  const options = ["Today", "Last 7 days", "Last 30 days"];
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: 12,
        width: 260,
        height: 290,
      }}
    >
      <Select size="sm" options={options} value={range} onChange={setRange} />
      <Select size="md" options={options} value={range} onChange={setRange} />
      <Select size="lg" options={options} value={range} onChange={setRange} />
    </div>
  );
}