checkboxes #01

Basic Checkbox with State Tracking

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>