Toggle

Toggle is a checkbox that is styled to look like a switch button.

This page is not up to date. Some of the examples might not work as expected.
Class name		Type
toggle
Component
For <input type="checkbox">
toggle-primary
Color
primary color
toggle-secondary
Color
secondary color
toggle-accent
Color
accent color
toggle-success
Color
success color
toggle-warning
Color
warning color
toggle-info
Color
info color
toggle-error
Color
error color
toggle-xs
Size
Extra small size
toggle-sm
Size
Small size
toggle-md
Size
Medium size (default)
toggle-lg
Size
Large size
toggle-xl
Size
Extra large size

Toggle

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

With label and form-control

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

Checkboxes with brand colors

<div class="flex flex-col">
  <div class="form-control w-52">
    <label class="label cursor-pointer">
      <span class="label-text">Remember me</span>
      <input type="checkbox" class="$$toggle $$toggle-primary" checked="checked" />
    </label>
  </div>
  <div class="form-control w-52">
    <label class="label cursor-pointer">
      <span class="label-text">Remember me</span>
      <input type="checkbox" class="$$toggle $$toggle-secondary" checked="checked" />
    </label>
  </div>
  <div class="form-control w-52">
    <label class="label cursor-pointer">
      <span class="label-text">Remember me</span>
      <input type="checkbox" class="$$toggle $$toggle-accent" checked="checked" />
    </label>
  </div>
</div>
<div class="flex flex-col">
  <div class="form-control w-52">
    <label class="label cursor-pointer">
      <span class="label-text">Remember me</span>
      <input type="checkbox" class="$$toggle $$toggle-primary" checked="checked" />
    </label>
  </div>
  <div class="form-control w-52">
    <label class="label cursor-pointer">
      <span class="label-text">Remember me</span>
      <input type="checkbox" class="$$toggle $$toggle-secondary" checked="checked" />
    </label>
  </div>
  <div class="form-control w-52">
    <label class="label cursor-pointer">
      <span class="label-text">Remember me</span>
      <input type="checkbox" class="$$toggle $$toggle-accent" checked="checked" />
    </label>
  </div>
</div>

Checkboxes with state colors

<input type="checkbox" class="$$toggle $$toggle-success" checked="checked" />
<input type="checkbox" class="$$toggle $$toggle-warning" checked="checked" />
<input type="checkbox" class="$$toggle $$toggle-info" checked="checked" />
<input type="checkbox" class="$$toggle $$toggle-error" checked="checked" />
<input type="checkbox" class="$$toggle $$toggle-success" checked="checked" />
<input type="checkbox" class="$$toggle $$toggle-warning" checked="checked" />
<input type="checkbox" class="$$toggle $$toggle-info" checked="checked" />
<input type="checkbox" class="$$toggle $$toggle-error" checked="checked" />

Sizes

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

Disabled

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

Disabled and checked

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

Indeterminate

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

Toggle with custom color

<input
  type="checkbox"
  class="$$toggle border-blue-500 bg-blue-500 [--tglbg:yellow] hover:bg-blue-700"
  checked="checked" />
<input
  type="checkbox"
  class="$$toggle border-blue-500 bg-blue-500 [--tglbg:yellow] hover:bg-blue-700"
  checked="checked" />
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details
Please upgrade your browser