Toggle is a checkbox that is styled to look like a switch button.
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-neutral | Color | neutral 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 |
<input type="checkbox" checked="checked" class="$$toggle" />
<input type="checkbox" checked="checked" class="$$toggle" />
<input type="checkbox" checked="checked" class="$$toggle" />
<input type="checkbox" checked="checked" class="$$toggle" />
<fieldset class="$$fieldset p-4 bg-base-100 border border-base-300 rounded-box w-64"> <legend class="$$fieldset-legend">Login options</legend> <label class="$$fieldset-label"> <input type="checkbox" checked="checked" class="$$toggle" /> Remember me </label> </fieldset>
<fieldset class="$$fieldset p-4 bg-base-100 border border-base-300 rounded-box w-64">
<legend class="$$fieldset-legend">Login options</legend>
<label class="$$fieldset-label">
<input type="checkbox" checked="checked" class="$$toggle" />
Remember me
</label>
</fieldset>
<fieldset class="$$fieldset p-4 bg-base-100 border border-base-300 rounded-box w-64"> <legend class="$$fieldset-legend">Login options</legend> <label class="$$fieldset-label"> <input type="checkbox" checked="checked" class="$$toggle" /> Remember me </label> </fieldset>
<fieldset class="$$fieldset p-4 bg-base-100 border border-base-300 rounded-box w-64">
<legend class="$$fieldset-legend">Login options</legend>
<label class="$$fieldset-label">
<input type="checkbox" checked="checked" class="$$toggle" />
Remember me
</label>
</fieldset>
<input type="checkbox" checked="checked" class="$$toggle $$toggle-xs" /> <input type="checkbox" checked="checked" class="$$toggle $$toggle-sm" /> <input type="checkbox" checked="checked" class="$$toggle $$toggle-md" /> <input type="checkbox" checked="checked" class="$$toggle $$toggle-lg" /> <input type="checkbox" checked="checked" class="$$toggle $$toggle-xl" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-xs" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-sm" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-md" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-lg" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-xl" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-xs" /> <input type="checkbox" checked="checked" class="$$toggle $$toggle-sm" /> <input type="checkbox" checked="checked" class="$$toggle $$toggle-md" /> <input type="checkbox" checked="checked" class="$$toggle $$toggle-lg" /> <input type="checkbox" checked="checked" class="$$toggle $$toggle-xl" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-xs" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-sm" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-md" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-lg" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-xl" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-primary" /> <input type="checkbox" checked="checked" class="$$toggle $$toggle-secondary" /> <input type="checkbox" checked="checked" class="$$toggle $$toggle-accent" /> <input type="checkbox" checked="checked" class="$$toggle $$toggle-neutral" /> <input type="checkbox" checked="checked" class="$$toggle $$toggle-info" /> <input type="checkbox" checked="checked" class="$$toggle $$toggle-success" /> <input type="checkbox" checked="checked" class="$$toggle $$toggle-warning" /> <input type="checkbox" checked="checked" class="$$toggle $$toggle-error" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-primary" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-secondary" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-accent" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-neutral" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-info" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-success" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-warning" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-error" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-primary" /> <input type="checkbox" checked="checked" class="$$toggle $$toggle-secondary" /> <input type="checkbox" checked="checked" class="$$toggle $$toggle-accent" /> <input type="checkbox" checked="checked" class="$$toggle $$toggle-neutral" /> <input type="checkbox" checked="checked" class="$$toggle $$toggle-info" /> <input type="checkbox" checked="checked" class="$$toggle $$toggle-success" /> <input type="checkbox" checked="checked" class="$$toggle $$toggle-warning" /> <input type="checkbox" checked="checked" class="$$toggle $$toggle-error" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-primary" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-secondary" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-accent" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-neutral" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-info" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-success" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-warning" />
<input type="checkbox" checked="checked" class="$$toggle $$toggle-error" />
<input type="checkbox" class="$$toggle" disabled /> <input type="checkbox" class="$$toggle" disabled checked="checked" />
<input type="checkbox" class="$$toggle" disabled />
<input type="checkbox" class="$$toggle" disabled checked="checked" />
<input type="checkbox" class="$$toggle" disabled /> <input type="checkbox" class="$$toggle" disabled checked="checked" />
<input type="checkbox" class="$$toggle" disabled />
<input type="checkbox" class="$$toggle" disabled checked="checked" />
<!-- You can make a checkbox indeterminate using JS --> <script> document.getElementById("my-toggle").indeterminate = true </script> <input type="checkbox" class="$$toggle" id="my-toggle" />
<!-- You can make a checkbox indeterminate using JS -->
<script>
document.getElementById("my-toggle").indeterminate = true
</script>
<input type="checkbox" class="$$toggle" id="my-toggle" />
<!-- You can make a checkbox indeterminate using JS --> <script> document.getElementById("my-toggle").indeterminate = true </script> <input type="checkbox" class="$$toggle" id="my-toggle" />
<!-- You can make a checkbox indeterminate using JS -->
<script>
document.getElementById("my-toggle").indeterminate = true
</script>
<input type="checkbox" class="$$toggle" id="my-toggle" />
<label class="$$toggle text-base-content"> <input type="checkbox"> <svg aria-label="enabled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="4" fill="none" stroke="currentColor"><path d="M20 6 9 17l-5-5"></path></g></svg> <svg aria-label="disabled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </label>
<label class="$$toggle text-base-content">
<input type="checkbox">
<svg aria-label="enabled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="4" fill="none" stroke="currentColor"><path d="M20 6 9 17l-5-5"></path></g></svg>
<svg aria-label="disabled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</label>
<label class="$$toggle text-base-content"> <input type="checkbox"> <svg aria-label="enabled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="4" fill="none" stroke="currentColor"><path d="M20 6 9 17l-5-5"></path></g></svg> <svg aria-label="disabled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> </label>
<label class="$$toggle text-base-content">
<input type="checkbox">
<svg aria-label="enabled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="4" fill="none" stroke="currentColor"><path d="M20 6 9 17l-5-5"></path></g></svg>
<svg aria-label="disabled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</label>
<input type="checkbox" checked="checked" class="$$toggle border-indigo-600 bg-indigo-500 checked:bg-orange-400 checked:text-orange-800 checked:border-orange-500 " />
<input type="checkbox" checked="checked" class="$$toggle border-indigo-600 bg-indigo-500 checked:bg-orange-400 checked:text-orange-800 checked:border-orange-500 " />
<input type="checkbox" checked="checked" class="$$toggle border-indigo-600 bg-indigo-500 checked:bg-orange-400 checked:text-orange-800 checked:border-orange-500 " />
<input type="checkbox" checked="checked" class="$$toggle border-indigo-600 bg-indigo-500 checked:bg-orange-400 checked:text-orange-800 checked:border-orange-500 " />