Components
Loading preview...
Listbox with react-aria
npx shadcn@latest add https://21st.dev/r/serafimcloud/listbox"use client";
import { Label } from "@/components/ui/label";
import { ListBox, ListBoxItem } from "@/components/ui/listbox";
function ListBoxMultiple() {
return (
<div className="space-y-2 min-w-[300px]">
<Label>Listbox with multiple options</Label>
<div className="overflow-hidden rounded-lg border border-input">
<ListBox
className="max-h-72 min-h-20 space-y-1 overflow-auto bg-background p-1 text-sm shadow-sm shadow-black/5 transition-shadow"
aria-label="Select framework"
selectionMode="multiple"
defaultSelectedKeys={["react", "vue"]}
>
<ListBoxItem id="react">React</ListBoxItem>
<ListBoxItem id="vue">Vue</ListBoxItem>
<ListBoxItem id="angular">Angular</ListBoxItem>
<ListBoxItem id="svelte">Svelte</ListBoxItem>
</ListBox>
</div>
<p className="mt-2 text-xs text-muted-foreground">
Built with{" "}
<a
className="underline hover:text-foreground"
href="https://react-spectrum.adobe.com/react-aria/ListBox.html"
target="_blank"
rel="noopener nofollow"
>
React Aria
</a>
</p>
</div>
);
}
export { ListBoxMultiple };