Components
Loading preview...
Listbox with react-aria
npx shadcn@latest add https://21st.dev/r/serafimcloud/listboximport { Label } from "@/components/ui/label";
import {
ListBox,
ListBoxItem,
ListBoxSection,
ListBoxHeader,
ListBoxSeparator
} from "@/components/ui/listbox";
function Example() {
return (
<div className="space-y-2 min-w-[300px]">
<Label>Listbox with option groups</Label>
<div className="overflow-hidden rounded-lg border border-input">
<ListBox
aria-label="Select some foods"
selectionMode="multiple"
defaultSelectedKeys={["lettuce", "tuna"]}
>
<ListBoxSection>
<ListBoxHeader>Veggies</ListBoxHeader>
<ListBoxItem id="lettuce">Lettuce</ListBoxItem>
<ListBoxItem id="tomato">Tomato</ListBoxItem>
<ListBoxItem id="onion">Onion</ListBoxItem>
</ListBoxSection>
<ListBoxSeparator />
<ListBoxSection>
<ListBoxHeader>Protein</ListBoxHeader>
<ListBoxItem id="ham">Ham</ListBoxItem>
<ListBoxItem id="tuna">Tuna</ListBoxItem>
<ListBoxItem id="tofu">Tofu</ListBoxItem>
</ListBoxSection>
<ListBoxSeparator />
<ListBoxSection>
<ListBoxHeader>Condiments</ListBoxHeader>
<ListBoxItem id="mayo">Mayonnaise</ListBoxItem>
<ListBoxItem id="mustard">Mustard</ListBoxItem>
<ListBoxItem id="ranch">Ranch</ListBoxItem>
</ListBoxSection>
</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 { Example }