Components
Loading preview...
A collapsible dropdown that lets users pick one or multiple options from a list.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-select"use client"
import type { Key } from "@heroui/react"
import { Label, ListBox, Select } from "@/components/ui/heroui-select"
import { useState } from "react"
export default function Demo() {
const states = [
{ id: "california", name: "California" },
{ id: "texas", name: "Texas" },
{ id: "florida", name: "Florida" },
{ id: "new-york", name: "New York" },
{ id: "illinois", name: "Illinois" },
{ id: "pennsylvania", name: "Pennsylvania" },
]
const [state, setState] = useState<Key | null>("california")
const selectedState = states.find((s) => s.id === state)
return (
<div className="space-y-2">
<Select
className="w-[256px]"
placeholder="Select a state"
value={state}
onChange={(value) => setState(value)}
>
<Label>State (controlled)</Label>
<Select.Trigger>
<Select.Value />
<Select.Indicator />
</Select.Trigger>
<Select.Popover>
<ListBox>
{states.map((s) => (
<ListBox.Item key={s.id} id={s.id} textValue={s.name}>
{s.name}
<ListBox.ItemIndicator />
</ListBox.Item>
))}
</ListBox>
</Select.Popover>
</Select>
<p className="text-sm text-muted">Selected: {selectedState?.name || "None"}</p>
</div>
)
}