Skip to content
Storm UI
Docs/Checkbox

Checkbox

Custom styled checkbox with Storm's border signature.

Usage

tsx
1import { Checkbox, Label } from '@storm-ds/ui'
2
3<div className="flex items-center gap-2">
4  <Checkbox id="terms" />
5  <Label htmlFor="terms">Accept terms</Label>
6</div>

Default

tsx
1<div className="flex items-center gap-2">
2  <Checkbox id="opt1" />
3  <Label htmlFor="opt1">Option one</Label>
4</div>
5<div className="flex items-center gap-2">
6  <Checkbox id="opt2" defaultChecked />
7  <Label htmlFor="opt2">Option two (checked)</Label>
8</div>
9<div className="flex items-center gap-2">
10  <Checkbox id="opt3" disabled />
11  <Label htmlFor="opt3">Disabled</Label>
12</div>

Sizes

tsx
1<div className="flex items-center gap-2">
2  <Checkbox id="cb-sm" size="sm" defaultChecked />
3  <Label htmlFor="cb-sm">Small</Label>
4</div>
5<div className="flex items-center gap-2">
6  <Checkbox id="cb-md" size="md" defaultChecked />
7  <Label htmlFor="cb-md">Medium</Label>
8</div>
9<div className="flex items-center gap-2">
10  <Checkbox id="cb-lg" size="lg" defaultChecked />
11  <Label htmlFor="cb-lg">Large</Label>
12</div>

With Description

You agree to our Terms of Service and Privacy Policy.

tsx
1<div className="flex gap-2">
2  <Checkbox id="terms" className="mt-0.5" />
3  <div>
4    <Label htmlFor="terms">Accept terms</Label>
5    <p className="text-xs text-storm-muted-foreground">You agree to our Terms of Service and Privacy Policy.</p>
6  </div>
7</div>

Group

Select interests
tsx
1<fieldset className="space-y-3">
2  <legend className="text-sm font-medium text-storm-foreground mb-2">Select interests</legend>
3  <div className="flex items-center gap-2">
4    <Checkbox id="dev" defaultChecked />
5    <Label htmlFor="dev">Development</Label>
6  </div>
7  <div className="flex items-center gap-2">
8    <Checkbox id="des" />
9    <Label htmlFor="des">Design</Label>
10  </div>
11  <div className="flex items-center gap-2">
12    <Checkbox id="mkt" />
13    <Label htmlFor="mkt">Marketing</Label>
14  </div>
15</fieldset>

Props

PropTypeDefaultDescription
classNamestring-Custom classes
disabledbooleanfalseDisables the checkbox
size'sm' | 'md' | 'lg''md'Checkbox size

Use with AI

Create a Next.js component using Storm UI's Checkbox. Import: `import { Checkbox, Label } from '@storm-ds/ui'`. Custom styled checkbox with appearance-none and Storm border. Sizes: sm, md, lg. Uses checked: pseudo-classes. Pair with Label using htmlFor/id. Example: `<div className="flex items-center gap-2"><Checkbox id="terms" /><Label htmlFor="terms">Accept terms</Label></div>`, `<Checkbox size="lg" id="agree" />`

Previous

Label

Next

Switch