A dropdown select input that groups related options under labeled sections divided by separators, for forms with categorized choices.
import { useId } from "react";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectSeparator,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
function SelectWithSeparatorDemo() {
const id = useId();
return (
<div className="w-full max-w-xs space-y-2">
<Label htmlFor={id}>Select Your Focus Area</Label>
<Select defaultValue="Leadership" defaultOpen>
<SelectTrigger id={id} className="w-full">
<SelectValue />
</SelectTrigger>
<SelectContent className="data-[state=open]:slide-in-from-bottom-8 data-[state=open]:zoom-in-100 duration-400">
<SelectGroup>
<SelectLabel>Professional Skills</SelectLabel>
<SelectItem value="Leadership">Leadership</SelectItem>
<SelectItem value="Communication">Communication</SelectItem>
<SelectItem value="Project Management">
Project Management
</SelectItem>
</SelectGroup>
<SelectSeparator />
<SelectGroup>
<SelectLabel>Personal Growth</SelectLabel>
<SelectItem value="Mindfulness">Mindfulness</SelectItem>
<SelectItem value="Time Management">Time Management</SelectItem>
<SelectItem value="Creativity">Creativity</SelectItem>
</SelectGroup>
<SelectSeparator />
<SelectGroup>
<SelectLabel>Technology & Innovation</SelectLabel>
<SelectItem value="AI & Machine Learning">
AI & Machine Learning
</SelectItem>
<SelectItem value="Blockchain">Blockchain</SelectItem>
<SelectItem value="Web Development">Web Development</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
);
}
export default function Preview() {
return (
<div className="flex w-full items-center justify-center p-10">
<SelectWithSeparatorDemo />
</div>
);
}
Part of ShadcnSpace — browse the full library on 21st.dev.