开关
开关是一个被设计成开关按钮样式的复选框。
| 类名 | 类型 | |
|---|---|---|
| toggle | 组件 | 用于 <input type="checkbox"> |
| toggle-primary | 颜色 | 原色 |
| toggle-secondary | 颜色 | 次要颜色 |
| toggle-accent | 颜色 | 强调色 |
| toggle-neutral | 颜色 | 中性色 |
| toggle-success | 颜色 | 成功色 |
| toggle-warning | 颜色 | 警告色 |
| toggle-info | 颜色 | 信息色 |
| toggle-error | 颜色 | 错误色 |
| toggle-xs | 尺寸 | 超小尺寸 |
| toggle-sm | 尺寸 | 小尺寸 |
| toggle-md | 尺寸 | 中等尺寸[默认] |
| toggle-lg | 尺寸 | 大尺寸 |
| toggle-xl | 尺寸 | 超大尺寸 |
<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" />为标签使用 toggle 类，并在其中放置一个复选框和 2 个图标。
<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 " />你有问题吗？ 在 GitHub 上提问 或 Discord 服务器
你发现 Bug 了吗？ 在 GitHub 上提交 issue
你喜欢 daisyUI 吗？ 发帖宣传一下吧！
支持 daisyUI 的开发： Open Collective
