import { DesignCheckbox } from "@/components/ui/design-checkbox";Interactive examples demonstrating component usage
Click to toggle
const [checked, setChecked] = useState(false);
<button onClick={() => setChecked(!checked)} className="flex items-center gap-2">
<DesignCheckbox checked={checked} />
<span>Label</span>
</button>One option at a time
const [mode, setMode] = useState<"niche" | "similar">("niche");
<button onClick={() => setMode("niche")} className="...">
<DesignCheckbox checked={mode === "niche"} />
<span>Niche Mode</span>
</button>
<button onClick={() => setMode("similar")} className="...">
<DesignCheckbox checked={mode === "similar"} />
<span>Similar Mode</span>
</button>small, default, large
<DesignCheckbox size="small" checked />
<DesignCheckbox size="default" checked />
<DesignCheckbox size="large" checked />All visual states
<DesignCheckbox checked={false} />
<DesignCheckbox checked={true} />
<DesignCheckbox disabled />
<DesignCheckbox disabled checked />Checkbox list pattern
{items.map(item => (
<button
key={item.id}
onClick={() => toggleItem(item.id)}
className="flex items-center gap-3 ..."
>
<DesignCheckbox checked={item.checked} />
<span>{item.label}</span>
</button>
))}| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | Whether the checkbox is checked (display only) |
disabled | boolean | false | Applies disabled visual style (50% opacity) |
size | "small" | "default" | "large" | "default" | Size variant (16px, 20px, 24px) |
className | string | - | Additional CSS classes |
const [checked, setChecked] = useState(false);
<button
onClick={() => setChecked(!checked)}
className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-surface-200"
>
<DesignCheckbox checked={checked} />
<span>Toggle me</span>
</button>type Mode = "niche" | "similar";
const [mode, setMode] = useState<Mode>("niche");
<div className="flex flex-col gap-1">
<button onClick={() => setMode("niche")} className="flex items-center gap-3 ...">
<DesignCheckbox checked={mode === "niche"} />
<span>Niche Mode</span>
</button>
<button onClick={() => setMode("similar")} className="flex items-center gap-3 ...">
<DesignCheckbox checked={mode === "similar"} />
<span>Similar Mode</span>
</button>
</div>const [items, setItems] = useState([
{ id: 1, label: "Email notifications", checked: true },
{ id: 2, label: "Push notifications", checked: false },
]);
const toggle = (id: number) => {
setItems(items.map(item =>
item.id === id ? { ...item, checked: !item.checked } : item
));
};
{items.map(item => (
<button
key={item.id}
onClick={() => toggle(item.id)}
className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-surface-200"
>
<DesignCheckbox checked={item.checked} />
<span>{item.label}</span>
</button>
))}<button
onClick={() => setSelected(!selected)}
className="flex items-center gap-3 w-full px-3 py-2.5 rounded-lg hover:bg-surface-200 text-left"
>
<DesignCheckbox checked={selected} />
<div>
<span className="text-sm font-medium">{title}</span>
<p className="text-xs text-secondary">{description}</p>
</div>
</button>Always wrap in a clickable parent (button/div with onClick)
<button onClick={() => setChecked(!checked)} className="flex items-center gap-3">
<DesignCheckbox checked={checked} />
<span>Label text</span>
</button>Use for multi-select (checkbox) scenarios
Use for single-select when switching between options
Don't use DesignCheckbox standalone - it's a display-only indicator
Don't use for radio groups where one option must always be selected
Don't wrap in <label> - use <button> with onClick instead
Use when user can deselect or switch between modes
// Mode can be "niche", "similar", or null (none selected)
<div className="flex flex-col gap-1">
<button onClick={() => setMode("niche")} className="flex items-center gap-3 px-3 py-2 ...">
<DesignCheckbox checked={mode === "niche"} />
<div>
<span className="font-medium">Niche Mode</span>
<p className="text-xs text-secondary">Find niche-specific content</p>
</div>
</button>
<button onClick={() => setMode("similar")} className="flex items-center gap-3 px-3 py-2 ...">
<DesignCheckbox checked={mode === "similar"} />
<div>
<span className="font-medium">Similar Mode</span>
<p className="text-xs text-secondary">Find similar accounts</p>
</div>
</button>
</div>Use for on/off preferences
<label className="flex items-center justify-between p-3 rounded-lg hover:bg-surface-200">
<span>Enable dark mode</span>
<DesignCheckbox
checked={darkMode}
onCheckedChange={setDarkMode}
/>
</label>Use for selecting multiple items from a list
{users.map(user => (
<label key={user.id} className="flex items-center gap-3 p-2">
<DesignCheckbox
checked={selectedIds.includes(user.id)}
onCheckedChange={() => toggleSelection(user.id)}
/>
<Avatar src={user.avatar} />
<span>{user.name}</span>
</label>
))}