Select

Forms 2

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

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

export default function SelectValidation() {
  return (
    <Form className="flex flex-col gap-2">
      <Select
        isRequired
        className="group w-[200px]"
        placeholder="Select an item"
      >
        <Label>Favorite Animal</Label>
        <SelectTrigger>
          <SelectValue />
        </SelectTrigger>
        <FieldError />
        <SelectPopover>
          <SelectListBox>
            <SelectItem>Aardvark</SelectItem>
            <SelectItem>Cat</SelectItem>
            <SelectItem>Dog</SelectItem>
            <SelectItem>Kangaroo</SelectItem>
            <SelectItem>Panda</SelectItem>
            <SelectItem>Snake</SelectItem>
          </SelectListBox>
        </SelectPopover>
      </Select>
      <Button className="w-fit" type="submit">
        Submit
      </Button>
    </Form>
  )
}