About
A control that allows the user to toggle between checked and not checked.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Checkbox to your project and fits it to your theme.
Code
How Checkbox is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
'use client';
import { useId, useState } from 'react';
import { Checkbox } from '@/components/ui/checkbox-1';
import { Label } from '@/components/ui/label';
export default function CheckboxDemo() {
const id = useId();
const [checked, setChecked] = useState<'indeterminate' | boolean>('indeterminate');
return (
<div className="flex items-center space-x-2">
<Checkbox id={id} checked={checked} onCheckedChange={setChecked} />
<Label htmlFor={id}>Indeterminate state</Label>
</div>
);
}
Dependencies
More by Sean Hello
View all
3D Testimonails
3.4K
Line Charts 9
656
Alert
494
Line Charts 6
392
Area Charts 1
391
Scroll Area
376
Navigation Menu
319
Area Charts 2
318
More in Forms
View all
Premium Auth
524
Contact Card
1K
Book A Demo 1
73
Login 1
53
Form
137
Card Studio
41
Modern & Stunning sign in
1.6K
SignInPage
668
