Checkbox

1import { Checkbox } from "passport-ui";
2import { Label } from "passport-ui";

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