checkboxes #01
Basic Checkbox with State Tracking
1
Color options
Customize your colors.
<div class="flex items-center max-w-md p-12 py-48 mx-auto">
<div class="flex items-center w-full gap-2" x-data="{ checked: false }">
<input
id="basic-checkbox"
name="basic-checkbox"
type="checkbox"
x-model="checked"
class="rounded shadow size-4 border-base-300 text-blue-600 focus:ring-accent-600"
/>
<label class="text-base block text-sm text-base-500">
Basic checkbox (<span x-text="checked ? 'Checked' : 'Unchecked'"></span>)
</label>
</div>
</div>