Components
Loading preview...
A selectable control for binary choices, form options, indeterminate states, labels, and validation messaging.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-checkbox"use client";
import { Checkbox } from "@/components/ui/component";
function HeartIcon({ className }: { className?: string }) {
return (
<svg aria-hidden="true" viewBox="0 0 24 24" className={className}>
<path
d="M12 20.4s-7.2-4.7-8.8-9.1C2.1 8 4.2 5.2 7.3 5.2c1.8 0 3.2.9 4.1 2.2.9-1.3 2.3-2.2 4.1-2.2 3.1 0 5.2 2.8 4.1 6.1-1.5 4.4-8.6 9.1-8.6 9.1Z"
fill="currentColor"
/>
</svg>
);
}
function PlusIcon({ className }: { className?: string }) {
return (
<svg aria-hidden="true" viewBox="0 0 24 24" className={className}>
<path d="M12 5v14M5 12h14" fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth="3" />
</svg>
);
}
export default function CustomIndicatorDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<div className="flex flex-col gap-4">
<Checkbox defaultSelected icon={<HeartIcon className="size-3.5" />} color="danger">
Heart
</Checkbox>
<Checkbox defaultSelected icon={<PlusIcon className="size-3.5" />} color="success">
Plus
</Checkbox>
</div>
</div>
);
}
export { CustomIndicatorDemo };