Select

Forms 10

About

Here is Select component

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 { Text } from "react-aria-components"

import { Label } from "@/components/ui/text-field-basic"
import {
  Select,
  SelectItem,
  SelectListBox,
  SelectPopover,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select-1"

export default function SelectTextSlots() {
  return (
    <Select className="w-[200px]" placeholder="Select an item">
      <Label>Permissions</Label>
      <SelectTrigger>
        <SelectValue />
      </SelectTrigger>
      <SelectPopover>
        <SelectListBox>
          <SelectItem
            textValue="Read"
            className="flex flex-col items-start justify-center"
          >
            <Text slot="label">Read only</Text>
            <Text className="text-sm text-muted-foreground" slot="description">
              Read only
            </Text>
          </SelectItem>
          <SelectItem
            textValue="Write"
            className="flex flex-col items-start justify-center"
          >
            <Text slot="label">Write</Text>
            <Text slot="description" className="text-sm text-muted-foreground">
              Read and write only
            </Text>
          </SelectItem>
          <SelectItem
            textValue="Admin"
            className="flex flex-col items-start justify-center"
          >
            <Text slot="label">Admin</Text>
            <Text className="text-sm text-muted-foreground" slot="description">
              Full access
            </Text>
          </SelectItem>
        </SelectListBox>
      </SelectPopover>
    </Select>
  )
}