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, Label } from "@/components/ui/heroui-checkbox";
export default function FullRoundedDemo() {
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-6">
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">Rounded checkboxes</p>
<div className="flex flex-col gap-3">
<Checkbox defaultSelected size="sm" radius="full" name="small-rounded">
<Label>Small size</Label>
</Checkbox>
<Checkbox defaultSelected radius="full" name="default-rounded">
<Label>Default size</Label>
</Checkbox>
<Checkbox defaultSelected size="lg" radius="full" name="large-rounded">
<Label>Large size</Label>
</Checkbox>
<Checkbox defaultSelected size="lg" radius="full" name="xl-rounded">
<Label>Extra large size</Label>
</Checkbox>
</div>
</div>
</div>
);
}
export { FullRoundedDemo };