Components
Loading preview...
multiselect
npx shadcn@latest add https://21st.dev/r/originui/multiselectimport { Label } from "@/components/ui/label";
import MultipleSelector, { Option } from "@/components/ui/multiselect";
import { useId } from "react";
const frameworks: Option[] = [
{
value: "next.js",
label: "Next.js",
},
{
value: "sveltekit",
label: "SvelteKit",
},
{
value: "nuxt.js",
label: "Nuxt.js",
disable: true,
},
{
value: "remix",
label: "Remix",
},
{
value: "astro",
label: "Astro",
},
{
value: "angular",
label: "Angular",
},
{
value: "vue",
label: "Vue.js",
},
{
value: "react",
label: "React",
},
{
value: "ember",
label: "Ember.js",
},
{
value: "gatsby",
label: "Gatsby",
},
{
value: "eleventy",
label: "Eleventy",
disable: true,
},
{
value: "solid",
label: "SolidJS",
},
{
value: "preact",
label: "Preact",
},
{
value: "qwik",
label: "Qwik",
},
{
value: "alpine",
label: "Alpine.js",
},
{
value: "lit",
label: "Lit",
},
];
export function Component() {
const id = useId();
return (
<div className="*:not-first:mt-2">
<Label>Multiselect</Label>
<MultipleSelector
commandProps={{
label: "Select frameworks",
}}
value={frameworks.slice(0, 2)}
defaultOptions={frameworks}
placeholder="Select frameworks"
hideClearAllButton
hidePlaceholderWhenSelected
emptyIndicator={<p className="text-center text-sm">No results found</p>}
/>
<p className="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
Inspired by{" "}
<a
className="hover:text-foreground underline"
href="https://shadcnui-expansions.typeart.cc/docs/multiple-selector"
target="_blank"
rel="noopener nofollow"
>
shadcn/ui expansions
</a>
</p>
</div>
);
}