Select

Forms 20

About

Display a dropdown list of items. A recreation of Vercel's Geist design system.

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 React from "react";
import { Select } from "@/components/ui/select";

const ArrowCircleUp = () => (
  <svg
    height="16"
    strokeLinejoin="round"
    viewBox="0 0 16 16"
    width="16"
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M7.25 10.75V11.5H8.75V10.75V6.56066L10.2197 8.03033L10.75 8.56066L11.8107 7.5L11.2803 6.96967L8.53033 4.21967C8.23744 3.92678 7.76256 3.92678 7.46967 4.21967L4.71967 6.96967L4.18934 7.5L5.25 8.56066L5.78033 8.03033L7.25 6.56066V10.75ZM14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8ZM8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z"
    />
  </svg>
);

export const SelectDemo = () => {
  return (
    <div className="container mx-auto py-8">
      <div className="grid grid-cols-3 gap-8 mb-8 items-end">
        <Select placeholder="Default select" />
        <Select
          placeholder="With prefix"
          prefix={<ArrowCircleUp />}
        />

        <Select 
          label="My label" 
          placeholder="With label" 
        />
      </div>

      <div className="grid grid-cols-3 gap-8">
        <Select 
          disabled 
          placeholder="Disabled select" 
        />
        <Select
          error="Please select a value"
          placeholder="Error state"
        />
        <Select
          placeholder="With suffix"
          suffix={<ArrowCircleUp />}
        />
      </div>
    </div>
  );
};