复选框

复选框用于选择或取消选择一个值。

类名	类型
复选框	组件	复选框
checkbox-primary	颜色	原色
checkbox-secondary	颜色	副色
checkbox-accent	颜色	强调色
checkbox-neutral	颜色	中性色
checkbox-success	颜色	成功色
checkbox-warning	颜色	警告色
checkbox-info	颜色	信息色
checkbox-error	颜色	错误色
checkbox-xs	尺寸	超小尺寸
checkbox-sm	尺寸	小尺寸
checkbox-md	尺寸	中等尺寸[默认]
checkbox-lg	尺寸	大尺寸
checkbox-xl	尺寸	超大尺寸

复选框

<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" />

使用 fieldset 和 fieldset-label

登录选项记住我

<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="$$checkbox" />
    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="$$checkbox" />
    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="$$checkbox" />
    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="$$checkbox" />
    Remember me
  </label>
</fieldset>

尺寸

<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-xl" />

<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-xl" />

            
                <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-xl" />

<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-xl" />

颜色

<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-primary" />
<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-secondary" />
<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-accent" />
<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-neutral" />

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

<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-primary" />
<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-secondary" />
<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-accent" />
<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-neutral" />

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

            
                <input type="checkbox" checked="checked" class="$$checkbox $$checkbox-primary" />
<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-secondary" />
<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-accent" />
<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-neutral" />

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

<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-primary" />
<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-secondary" />
<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-accent" />
<input type="checkbox" checked="checked" class="$$checkbox $$checkbox-neutral" />

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

禁用

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

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

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

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

不确定状态

<!-- 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" />

自定义颜色的复选框

<input type="checkbox" checked="checked" class="$$checkbox border-indigo-600 bg-indigo-500 checked:bg-orange-400 checked:text-orange-800 checked:border-orange-500 " />

<input type="checkbox" checked="checked" class="$$checkbox border-indigo-600 bg-indigo-500 checked:bg-orange-400 checked:text-orange-800 checked:border-orange-500 " />

            
                <input type="checkbox" checked="checked" class="$$checkbox border-indigo-600 bg-indigo-500 checked:bg-orange-400 checked:text-orange-800 checked:border-orange-500 " />

<input type="checkbox" checked="checked" class="$$checkbox border-indigo-600 bg-indigo-500 checked:bg-orange-400 checked:text-orange-800 checked:border-orange-500 " />