Components
Loading preview...
Here is Select component
@jollyshopland
npx shadcn@latest add https://21st.dev/r/jollyshopland/select-1"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>
)
}