Checkbox

Checkboxes are used to select or deselect a value.

This page is not up to date. Some of the examples might not work as expected.

Class name	Type
checkbox	Component	Checkbox
checkbox-primary	Color	primary color
checkbox-secondary	Color	secondary color
checkbox-accent	Color	accent color
checkbox-success	Color	success color
checkbox-warning	Color	warning color
checkbox-info	Color	info color
checkbox-error	Color	error color
checkbox-xs	Size	Extra small size
checkbox-sm	Size	Small size
checkbox-md	Size	Medium size (default)
checkbox-lg	Size	Large size
checkbox-xl	Size	Extra large size

Checkbox

<input type="checkbox" checked="checked" class="$$checkbox" />

<input type="checkbox" checked="checked" class="$$checkbox" />

            
                <input type="checkbox" checked="checked" class="$$checkbox" />

<input type="checkbox" checked="checked" class="$$checkbox" />

With label and form-control

Remember me

<div class="$$form-control">
  <label class="$$label cursor-pointer">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox" />
  </label>
</div>

<div class="$$form-control">
  <label class="$$label cursor-pointer">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox" />
  </label>
</div>

            
                <div class="$$form-control">
  <label class="$$label cursor-pointer">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox" />
  </label>
</div>

<div class="$$form-control">
  <label class="$$label cursor-pointer">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox" />
  </label>
</div>

Primary color

Remember me

<div class="$$form-control">
  <label class="$$label cursor-pointer">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox checkbox-primary" />
  </label>
</div>

<div class="$$form-control">
  <label class="$$label cursor-pointer">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox checkbox-primary" />
  </label>
</div>

            
                <div class="$$form-control">
  <label class="$$label cursor-pointer">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox checkbox-primary" />
  </label>
</div>

<div class="$$form-control">
  <label class="$$label cursor-pointer">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox checkbox-primary" />
  </label>
</div>

Secondary color

Remember me

<div class="$$form-control">
  <label class="$$cursor-pointer $$label">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-secondary" />
  </label>
</div>

<div class="$$form-control">
  <label class="$$cursor-pointer $$label">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-secondary" />
  </label>
</div>

            
                <div class="$$form-control">
  <label class="$$cursor-pointer $$label">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-secondary" />
  </label>
</div>

<div class="$$form-control">
  <label class="$$cursor-pointer $$label">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-secondary" />
  </label>
</div>

Accent color

Remember me

<div class="$$form-control">
  <label class="$$cursor-pointer $$label">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-accent" />
  </label>
</div>

<div class="$$form-control">
  <label class="$$cursor-pointer $$label">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-accent" />
  </label>
</div>

            
                <div class="$$form-control">
  <label class="$$cursor-pointer $$label">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-accent" />
  </label>
</div>

<div class="$$form-control">
  <label class="$$cursor-pointer $$label">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-accent" />
  </label>
</div>

Success color

Remember me

<div class="$$form-control">
  <label class="$$cursor-pointer $$label">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-success" />
  </label>
</div>

<div class="$$form-control">
  <label class="$$cursor-pointer $$label">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-success" />
  </label>
</div>

            
                <div class="$$form-control">
  <label class="$$cursor-pointer $$label">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-success" />
  </label>
</div>

<div class="$$form-control">
  <label class="$$cursor-pointer $$label">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-success" />
  </label>
</div>

Warning color

Remember me

<div class="$$form-control">
  <label class="$$cursor-pointer $$label">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-warning" />
  </label>
</div>

<div class="$$form-control">
  <label class="$$cursor-pointer $$label">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-warning" />
  </label>
</div>

            
                <div class="$$form-control">
  <label class="$$cursor-pointer $$label">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-warning" />
  </label>
</div>

<div class="$$form-control">
  <label class="$$cursor-pointer $$label">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-warning" />
  </label>
</div>

Info color

Remember me

<div class="$$form-control">
  <label class="$$cursor-pointer $$label">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-info" />
  </label>
</div>

<div class="$$form-control">
  <label class="$$cursor-pointer $$label">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-info" />
  </label>
</div>

            
                <div class="$$form-control">
  <label class="$$cursor-pointer $$label">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-info" />
  </label>
</div>

<div class="$$form-control">
  <label class="$$cursor-pointer $$label">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-info" />
  </label>
</div>

Error color

Remember me

<div class="$$form-control">
  <label class="$$cursor-pointer $$label">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-error" />
  </label>
</div>

<div class="$$form-control">
  <label class="$$cursor-pointer $$label">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-error" />
  </label>
</div>

            
                <div class="$$form-control">
  <label class="$$cursor-pointer $$label">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-error" />
  </label>
</div>

<div class="$$form-control">
  <label class="$$cursor-pointer $$label">
    <span class="$$label-text">Remember me</span>
    <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-error" />
  </label>
</div>

Sizes

<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-xs" />
<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-sm" />
<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-md" />
<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-lg" />

<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-xs" />
<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-sm" />
<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-md" />
<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-lg" />

            
                <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-xs" />
<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-sm" />
<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-md" />
<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-lg" />

<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-xs" />
<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-sm" />
<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-md" />
<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-lg" />

Disabled

<input type="checkbox" class="$$checkbox" disabled />

<input type="checkbox" class="$$checkbox" disabled />

            
                <input type="checkbox" class="$$checkbox" disabled />

<input type="checkbox" class="$$checkbox" disabled />

Disabled and checked

<input type="checkbox" class="$$checkbox" disabled checked="checked" />

<input type="checkbox" class="$$checkbox" disabled checked="checked" />

            
                <input type="checkbox" class="$$checkbox" disabled checked="checked" />

<input type="checkbox" class="$$checkbox" disabled checked="checked" />

Indeterminate

<!-- You can make a checkbox indeterminate using JS -->
<script>
  document.getElementById("my-checkbox").indeterminate = true
</script>
<input type="checkbox" class="$$checkbox" id="my-checkbox" />

<!-- You can make a checkbox indeterminate using JS -->
<script>
  document.getElementById("my-checkbox").indeterminate = true
</script>
<input type="checkbox" class="$$checkbox" id="my-checkbox" />

            
                <!-- You can make a checkbox indeterminate using JS -->
<script>
  document.getElementById("my-checkbox").indeterminate = true
</script>
<input type="checkbox" class="$$checkbox" id="my-checkbox" />

<!-- You can make a checkbox indeterminate using JS -->
<script>
  document.getElementById("my-checkbox").indeterminate = true
</script>
<input type="checkbox" class="$$checkbox" id="my-checkbox" />

Checkbox with custom colors

<input
  type="checkbox"
  checked="checked"
  class="$$checkbox border-orange-400 [--chkbg:var(--color-indigo-600)] [--chkfg:orange] checked:border-indigo-800" />
<input
  type="checkbox"
  checked="checked"
  class="$$checkbox [--chkbg:oklch(var(--a))] [--chkfg:oklch(var(--p))]" />

<input
  type="checkbox"
  checked="checked"
  class="$$checkbox border-orange-400 [--chkbg:var(--color-indigo-600)] [--chkfg:orange] checked:border-indigo-800" />
<input
  type="checkbox"
  checked="checked"
  class="$$checkbox [--chkbg:oklch(var(--a))] [--chkfg:oklch(var(--p))]" />

            
                <input
  type="checkbox"
  checked="checked"
  class="$$checkbox border-orange-400 [--chkbg:var(--color-indigo-600)] [--chkfg:orange] checked:border-indigo-800" />
<input
  type="checkbox"
  checked="checked"
  class="$$checkbox [--chkbg:oklch(var(--a))] [--chkfg:oklch(var(--p))]" />

<input
  type="checkbox"
  checked="checked"
  class="$$checkbox border-orange-400 [--chkbg:var(--color-indigo-600)] [--chkfg:orange] checked:border-indigo-800" />
<input
  type="checkbox"
  checked="checked"
  class="$$checkbox [--chkbg:oklch(var(--a))] [--chkfg:oklch(var(--p))]" />