Checkbox
A control that allows the user to toggle between checked and not checked.
<div role="group" class="field flex-row items-center gap-3">
<input type="checkbox" id="terms" class="input">
<label for="terms">Accept terms and conditions</label>
</div>Usage
Add the input class to your <input type="checkbox"> elements. Pair it with Field and a native <label> for proper layout and labeling.
<input type="checkbox" class="input">Checked state
Use native HTML attributes for state. Add checked for an initially checked checkbox, or read and update the element's checked property in JavaScript.
<input type="checkbox" class="input" checked>Invalid state
Set aria-invalid="true" on the checkbox and, when using field, set data-invalid="true" on the field wrapper.
You must accept the terms to continue.
<div role="group" class="field flex-row items-start gap-3" data-invalid="true">
<input type="checkbox" id="invalid-checkbox" class="input" aria-invalid="true">
<div class="grid gap-1.5">
<label for="invalid-checkbox">Accept terms and conditions</label>
<p class="field-error">You must accept the terms to continue.</p>
</div>
</div>Examples
Basic
<div role="group" class="field flex-row items-center gap-3">
<input type="checkbox" id="checkbox-basic" class="input">
<label for="checkbox-basic">Accept terms and conditions</label>
</div>Description
By clicking this checkbox, you agree to the terms and conditions.
<div role="group" class="field flex-row items-start gap-3">
<input type="checkbox" id="checkbox-description" class="input" aria-describedby="checkbox-description-text">
<div class="grid gap-1.5">
<label for="checkbox-description">Accept terms and conditions</label>
<p id="checkbox-description-text" class="field-description">By clicking this checkbox, you agree to the terms and conditions.</p>
</div>
</div>Disabled
<div role="group" class="field flex-row items-center gap-3" data-disabled="true">
<input type="checkbox" id="checkbox-disabled" class="input" disabled>
<label for="checkbox-disabled">Accept terms and conditions</label>
</div>Group
<fieldset class="fieldset">
<legend>Sidebar</legend>
<p>Select the items you want to display in the sidebar.</p>
<div role="group" aria-label="Sidebar items" data-slot="checkbox-group">
<div role="group" class="field flex-row items-center gap-3">
<input class="input" type="checkbox" id="checkbox-recents" checked>
<label for="checkbox-recents">Recents</label>
</div>
<div role="group" class="field flex-row items-center gap-3">
<input class="input" type="checkbox" id="checkbox-home" checked>
<label for="checkbox-home">Home</label>
</div>
<div role="group" class="field flex-row items-center gap-3">
<input class="input" type="checkbox" id="checkbox-applications">
<label for="checkbox-applications">Applications</label>
</div>
<div role="group" class="field flex-row items-center gap-3">
<input class="input" type="checkbox" id="checkbox-desktop">
<label for="checkbox-desktop">Desktop</label>
</div>
</div>
</fieldset>Table
| Status | ||
|---|---|---|
| Active | olivia@example.com | |
| Inactive | noah@example.com |
<div class="table-container">
<table class="table">
<thead>
<tr>
<th><input type="checkbox" class="input" aria-label="Select all"></th>
<th>Status</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="input" aria-label="Select row 1" checked></td>
<td>Active</td>
<td>olivia@example.com</td>
</tr>
<tr>
<td><input type="checkbox" class="input" aria-label="Select row 2"></td>
<td>Inactive</td>
<td>noah@example.com</td>
</tr>
</tbody>
</table>
</div>RTL
Checkbox layout uses document direction and logical spacing. Set dir="rtl" on a parent to render right-to-left.
يمكنك تغيير هذا الخيار في أي وقت.
<div dir="rtl" class="field flex-row items-start gap-3">
<input type="checkbox" id="checkbox-rtl" class="input" aria-describedby="checkbox-rtl-description" checked>
<div class="grid gap-1.5">
<label for="checkbox-rtl">قبول الشروط والأحكام</label>
<p id="checkbox-rtl-description" class="field-description">يمكنك تغيير هذا الخيار في أي وقت.</p>
</div>
</div>