Checkbox
---import { Checkbox } from "@/components/starwind/checkbox";---
<Checkbox id="demo-checkbox" label="Checkbox" />Installation
pnpx starwind@latest add checkboxnpx starwind@latest add checkboxyarn dlx starwind@latest add checkboxUsage
variant
---import { Checkbox } from "@/components/starwind/checkbox";---
<Checkbox id="default" label="Default" variant="default" checked /><Checkbox id="primary" label="Primary" variant="primary" checked /><Checkbox id="secondary" label="Secondary" variant="secondary" checked /><Checkbox id="info" label="Info" variant="info" checked /><Checkbox id="success" label="Success" variant="success" checked /><Checkbox id="warning" label="Warning" variant="warning" checked /><Checkbox id="error" label="Error" variant="error" checked />size
---import { Checkbox } from "@/components/starwind/checkbox";---
<Checkbox id="small" label="Small" size="sm" /><Checkbox id="medium" label="Medium" size="md" /><Checkbox id="large" label="Large" size="lg" />disabled
---import { Checkbox } from "@/components/starwind/checkbox";---
<Checkbox id="disabled" label="Disabled" disabled /><Checkbox id="disabled-checked" label="Disabled Checked" disabled checked />API Reference
| Prop | Type | Default |
|---|---|---|
id | string | Required |
label | string | - |
variant | "default" | "primary" | "secondary" | "info" | "success" | "warning" | "error" | "default" |
size | "sm" | "md" | "lg" | "md" |
The component also accepts all standard HTML attributes for the <input type="checkbox"> element.
Changelog
v1.1.0
tailwind-variantsnow implemented. This usestailwind-mergeunder the hood to merge Tailwind classes without style conflicts, allowing you to override any existing classes using the “class” prop.