Checkbox

A control that allows the user to toggle between checked and not checked.

Demo

Accept terms and conditions

checkbox.html

<div x-init x-checkbox.checked>
  <button x-checkbox:indicator>
    <svg></svg>
  </button>
  <label x-checkbox:label>Accept terms and conditions</label>
</div>

Features

• Full keyboard navigation.

View Source (opens in new tab)

Anatomy

<div x-init x-checkbox>
  <button x-checkbox:indicator></button>
  <label x-checkbox:label></label>
</div>

Note

Notice the x-init in the markup. This is required for Alpine to detect and run directives.

Directives

x-checkbox

Required

---

The root element for the checkbox.

Modifier	Description
.checked	Checks the checkbox by default

Event	Description	detail
checkbox:change	Whether the checkbox is checked or unchecked.	{ checked: boolean }

Data Attribute	Values
[data-state]	checked | unchecked

x-checkbox:indicator

Required

---

Visual indicator for the checkbox.

Event	Description	detail
checkbox:change	Whether the checkbox is checked or unchecked.	{ checked: boolean }

Data Attribute	Values
[data-state]	checked | unchecked

x-checkbox:label

Required

---

Text label for the checkbox.

Data Attribute	Values
[data-state]	checked | unchecked