ContextQMD
Back to Daisyui

Checkbox

packages/docs/src/routes/(routes)/components/checkbox/+page.md

5.5.193.9 KB
Original Source
<script> import Component from "$components/Component.svelte" import Translate from "$components/Translate.svelte" let indeterminate = true; </script>

~Checkbox

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

~With fieldset and 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="label"> <input type="checkbox" checked="checked" class="checkbox" /> Remember me </label> </fieldset>
html
<fieldset class="$$fieldset bg-base-100 border-base-300 rounded-box w-64 border p-4">
  <legend class="$$fieldset-legend">Login options</legend>
  <label class="$$label">
    <input type="checkbox" checked="checked" class="$$checkbox" />
    Remember me
  </label>
</fieldset>

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

~Colors

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

~Disabled

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

~Indeterminate

<input type="checkbox" class="checkbox" bind:indeterminate onclick={(e)=>{e.preventDefault()}} />

html
<!-- 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-indigo-600 bg-indigo-500 checked:bg-orange-400 checked:text-orange-800 checked:border-orange-500 " />
html
<input
  type="checkbox"
  checked="checked"
  class="$$checkbox border-indigo-600 bg-indigo-500 checked:border-orange-500 checked:bg-orange-400 checked:text-orange-800"
/>