wip

src/components/shadcn-studio/checkbox/checkbox-13.tsx

@@ -0,0 +1,32 @@
+import { Checkbox } from '@/components/ui/checkbox'
+import { Label } from '@/components/ui/label'
+
+const CheckboxCardDemo = () => {
+  return (
+    <div className="space-y-2">
+      <Label className="border-border hover:border-primary/30 hover:bg-accent/50 flex cursor-pointer items-center items-start gap-2 gap-3 rounded-lg border p-3 transition-colors has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
+        <Checkbox
+          defaultChecked
+          className="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
+        />
+        <div className="grid gap-1.5 font-normal">
+          <p className="text-sm leading-none font-medium">Auto Start</p>
+          <p className="text-muted-foreground text-sm">
+            Starting with your OS.
+          </p>
+        </div>
+      </Label>
+      <Label className="hover:bg-accent/50 flex items-start gap-2 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
+        <Checkbox className="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700" />
+        <div className="grid gap-1.5 font-normal">
+          <p className="text-sm leading-none font-medium">Auto update</p>
+          <p className="text-muted-foreground text-sm">
+            Download and install new version
+          </p>
+        </div>
+      </Label>
+    </div>
+  )
+}
+
+export default CheckboxCardDemo