Checkbox

---
import { Checkbox } from "@/components/starwind/checkbox";
---

<Checkbox id="demo-checkbox" label="Checkbox" />

Installation

pnpx starwind@latest add checkbox

npx starwind@latest add checkbox

yarn dlx starwind@latest add checkbox

Usage

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

Small

Medium

Large

---
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

Disabled

Disabled Checked

---
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.2.0

No longer require an “id” prop
Adjust component to use type VariantProps from tailwind-variants. This provides greater type safety and cleans up component frontmatter.

v1.1.0

tailwind-variants now implemented. This uses tailwind-merge under the hood to merge Tailwind classes without style conflicts, allowing you to override any existing classes using the “class” prop.