A control that allows the user to toggle between checked and not checked.
<div class="flex items-center gap-2">
<input type="checkbox" class="kt-checkbox" id="check" value="1" /><label
class="kt-label"
for="check"
>Accept terms and conditions</label
>
</div>
<div class="flex items-center gap-2">
<input
type="checkbox"
class="kt-checkbox"
id="check"
checked=""
value="1"
/><label class="kt-label" for="check">Accept terms and conditions</label>
</div>
<div class="flex items-center gap-2">
<input
type="checkbox"
class="kt-checkbox"
disabled=""
id="check"
checked=""
value="1"
/><label class="kt-label" for="check">Accept terms and conditions</label>
</div>
<div class="flex items-center gap-2">
<input type="checkbox" class="kt-checkbox" id="check" value="1" /><label
class="kt-label"
for="check"
>Accept terms and conditions</label
>
</div>
<div class="flex items-center gap-2">
<input
type="checkbox"
class="kt-checkbox kt-checkbox-mono"
id="check"
checked=""
value="1"
/><label class="kt-label" for="check">Accept terms and conditions</label>
</div>
<div class="space-y-4">
<div class="flex items-center gap-2">
<input
type="checkbox"
class="kt-checkbox kt-checkbox-sm"
id="check_1"
checked=""
value="1"
/><label class="kt-label" for="check_1">Small</label>
</div>
<div class="flex items-center gap-2">
<input
type="checkbox"
class="kt-checkbox"
id="check_2"
checked=""
value="1"
/><label class="kt-label" for="check_2">Default</label>
</div>
<div class="flex items-center gap-2">
<input
type="checkbox"
class="kt-checkbox kt-checkbox-lg"
id="check_3"
checked=""
value="1"
/><label class="kt-label" for="check_3">Large</label>
</div>
</div>
<form class="kt-form">
<div class="kt-form-item">
<div class="kt-form-control kt-form-control-inline">
<input type="checkbox" class="kt-checkbox" id="check" value="1" /><label
class="kt-form-label"
for="check"
>Accept terms and conditions</label
>
</div>
<div class="kt-form-description">
Please accept the terms and conditions.
</div>
<div class="kt-form-message">You need to agree to proceed.</div>
</div>
<div class="kt-form-actions justify-start">
<button type="reset" class="kt-btn kt-btn-outline">Reset</button
><button type="submit" class="kt-btn">Submit</button>
</div>
</form>