A bordered list of options each pairing a labeled row with icon and a checkbox, useful for selecting multiple preferences or skills.
import { Gamepad2, MapPinned, Music2 } from "lucide-react";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
const skills = [
{ label: "Music & Singing", icon: Music2, checked: true },
{ label: "Gaming", icon: Gamepad2, checked: false },
{ label: "Traveling", icon: MapPinned, checked: true },
];
export default function Default() {
return (
<div className="flex w-full max-w-sm items-center justify-center p-6">
<ul className="flex w-full flex-col divide-y rounded-md border">
{skills.map(({ label, icon: Icon, checked }) => (
<li
key={label}
className="flex items-center justify-between gap-2 px-5 py-3"
>
<Label htmlFor={label}>
<span className="flex items-center gap-2">
<Icon className="size-4" /> {label}
</span>
</Label>
<Checkbox
id={label}
className="cursor-pointer"
defaultChecked={checked}
/>
</li>
))}
</ul>
</div>
);
}
Part of ShadcnSpace — browse the full library on 21st.dev.