Checkbox

A lightweight semantic checkbox component built using native HTML inputs and CSS variables.

Ignix Lite checkboxes support semantic intents, multiple sizes, accessibility-friendly focus states, and smooth interactions without requiring JavaScript.

---

Intent Variants

Preview

Success

Danger

Warning

Neutral

Code

<label data-intent="success">
  <input type="checkbox" checked />
  Success
</label>

<label data-intent="danger">
  <input type="checkbox" checked />
  Danger
</label>

<label data-intent="warning">
  <input type="checkbox" checked />
  Warning
</label>

<label data-intent="neutral">
  <input type="checkbox" checked />
  Neutral
</label>

---

Sizes

Preview

Small

Medium

Large

Code

<label data-size="sm">
  <input type="checkbox" checked />
  Small
</label>

<label data-size="md">
  <input type="checkbox" checked />
  Medium
</label>

<label data-size="lg">
  <input type="checkbox" checked />
  Large
</label>

---

Checkbox Group

Preview

JavaScript

Python

Java

Code

<label>
  <input type="checkbox" name="lang" value="js" />
  JavaScript
</label>

<label>
  <input type="checkbox" name="lang" value="py" />
  Python
</label>

<label>
  <input type="checkbox" name="lang" value="java" />
  Java
</label>

Usage

Preview

Accept terms and conditions

Code

<label>
  <input type="checkbox" />
  Accept terms and conditions
</label>

---

States

Preview

Checked

Disabled

Required

Code

<label>
  <input type="checkbox" checked />
  Checked
</label>

<label>
  <input type="checkbox" disabled />
  Disabled
</label>

<label>
  <input type="checkbox" required />
  Required
</label>

---

Usage

Preview

I agree to the Terms of Service

Subscribe to product updates

Code

<form>

  <label>
    <input type="checkbox" checked />
    I agree to the Terms of Service
  </label>

  <label data-intent="success">
    <input type="checkbox" checked />
    Subscribe to product updates
  </label>

  <button data-intent="primary">
    Continue
  </button>

</form>

---

Attributes

Attribute	Type	Description
data-intent	'success' | 'danger' | 'warning' | 'neutral'	Applies semantic checkbox colors
data-size	'sm' | 'md' | 'lg'	Controls checkbox size
checked	boolean	Sets checked state
disabled	boolean	Disables interactions
required	boolean	Marks checkbox as required
name	string	Native checkbox group name
value	string	Native checkbox value
type="checkbox"	string	Native checkbox input type