Checkbox

A control that allows the user to select one or more options from a set.

Installation

Import the component from the passport-ui package.

components/example.tsx
1
2
import { Checkbox } from "passport-ui";
import { Label } from "passport-ui";

Usage

Basic example showing how to use the component.

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>

Additional resources

Documentation and examples are available in Storybook.