Components
Loading preview...
Displays a list of options for the user to pick from—triggered by a button.
npx shadcn@latest add https://21st.dev/r/sean0205/selectimport {
Select,
SelectContent,
SelectIndicator,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { RiCheckboxCircleFill } from '@remixicon/react';
export default function SelectDemo() {
return (
<Select
defaultValue="read_write"
indicatorPosition="right"
indicator={
<SelectIndicator>
<RiCheckboxCircleFill className="size-4 text-primary" />
</SelectIndicator>
}
>
<SelectTrigger defaultValue="read_only" className="w-[200px] [&_small]:hidden">
<SelectValue placeholder="Select access level" />
</SelectTrigger>
<SelectContent>
<SelectItem value="full_access">
<span className="flex flex-col items-start gap-px">
<span className="font-medium">Full access</span>
<small className="text-muted-foreground text-xs">Can modify list access</small>
</span>
</SelectItem>
<SelectItem value="read_write">
<span className="flex flex-col items-start gap-px">
<span className="font-medium">Read and write</span>
<small className="text-muted-foreground text-xs">Can edit & publish lists</small>
</span>
</SelectItem>
<SelectItem value="read_only">
<span className="flex flex-col items-start gap-px">
<span className="font-medium">Read only</span>
<small className="text-muted-foreground text-xs">Can only view lists</small>
</span>
</SelectItem>
<SelectItem value="no_access">
<span className="flex flex-col items-start gap-px">
<span className="font-medium">No access</span>
<small className="text-muted-foreground text-xs">Cannot view or edit lists</small>
</span>
</SelectItem>
</SelectContent>
</Select>
);
}