Select

Forms

About

A searchable, keyboard-navigable dropdown select field for choosing a single option from a list, with support for loading, disabled, error and helper-text states.

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

"use client";
import { Select } from "@/components/ui/select";

export default function SelectDemo() {
  return (
    <div className="w-full max-w-sm">
      <Select placeholder="Select a country" ariaLabel="country">
        <Select.Item value="US">United States</Select.Item>
        <Select.Item value="BR">Brazil</Select.Item>
        <Select.Item value="DE">Germany</Select.Item>
        <Select.Item value="JP">Japan</Select.Item>
        <Select.Item value="FR">France</Select.Item>
        <Select.Item value="GB">United Kingdom</Select.Item>
        <Select.Item value="PT">Portugal</Select.Item>
        <Select.Item value="IT">Italy</Select.Item>
        <Select.Item value="CA">Canada</Select.Item>
      </Select>
    </div>
  );
}