components/example.tsx
1
2
import { Checkbox } from "passport-ui";import { Label } from "passport-ui";components/example.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<Checkbox /> {/* With label */}<div className="flex items-center gap-3"> <Checkbox id="terms" defaultChecked /> <Label htmlFor="terms">Accept terms and conditions</Label></div> {/* With description */}<div className="flex items-start gap-3"> <Checkbox id="notifications" defaultChecked /> <div className="meta-container"> <Label htmlFor="notifications">Enable notifications</Label> <p>You can enable or disable notifications at any time.</p> </div></div> {/* Disabled state */}<div className="flex items-start gap-3"> <Checkbox id="disabled" disabled /> <Label htmlFor="disabled">Disabled option</Label></div>