Svelte Checkbox - Flowbite

Get started with the checkbox component to allow the user to select one or more options in the form of a square box available in multiple sizes and colors

The checkbox component can be used to receive one or more selected options from the user in the form of a square box available in multiple styles, sizes, colors, and variants.

Setup #

Svelte
<script>
  import { Checkbox } from 'flowbite-svelte';
</script>

Checkbox examples #

Use this default example of a checbkox element in a checked, unchecked and indeterminate state.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6 flex flex-col gap-4"><label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center"><input type="checkbox" value="on" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> Default checkbox</label>   <label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center"><input type="checkbox" value="on" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600" checked> Checked state</label>   <label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center"><input type="checkbox" value="on" indeterminate class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> Indeterminate state</label>  </div>
Svelte
<Checkbox>Default checkbox</Checkbox>
<Checkbox checked>Checked state</Checkbox>
<Checkbox indeterminate>Indeterminate state</Checkbox>

Disabled state #

This example can be used for the disabled state of the checkbox component by applying the disabled attribute to the input element.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6 flex flex-col gap-4"><label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center"><input type="checkbox" value="on" disabled class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> Disabled checkbox</label>   <label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center"><input type="checkbox" value="on" disabled class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600" checked> Disabled checked</label>   <label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center"><input type="checkbox" value="on" disabled indeterminate class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> Disabled indeterminate</label>  </div>
Svelte
<Checkbox disabled>Disabled checkbox</Checkbox>
<Checkbox disabled checked>Disabled checked</Checkbox>
<Checkbox disabled indeterminate>Disabled indeterminate</Checkbox>

Alternative syntax #

If you need separate control over the label and the checkbox you can use the verbose syntax, but then you need to take care about aligning manually.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6 flex flex-col gap-4"><div class="relative overflow-x-auto"> <table class="w-full text-left text-sm text-gray-500 dark:text-gray-400"><thead class="text-xs uppercase text-gray-700 dark:text-gray-400 bg-gray-50 dark:bg-gray-700"><tr><th class="px-6 py-3">Left column</th>  <th class="px-6 py-3">Right column</th> </tr></thead>  <tbody class="divide-y dark:divide-gray-700"><tr class="border-b last:border-b-0 bg-white dark:bg-gray-800 dark:border-gray-700 divide-x rtl:divide-x-reverse dark:divide-gray-700"><td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900 dark:text-white"><label for="checkbox1" class="text-sm rtl:text-right font-medium block text-gray-900 dark:text-gray-300">Default checkbox</label> </td>  <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900 dark:text-white"><label for="checkbox2" class="text-sm rtl:text-right font-medium block text-gray-900 dark:text-gray-300">Disabled checkbox</label> </td> </tr>  <tr class="border-b last:border-b-0 bg-white dark:bg-gray-800 dark:border-gray-700 divide-x rtl:divide-x-reverse dark:divide-gray-700"><td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900 dark:text-white"><label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center"><input type="checkbox" value="on" id="checkbox1" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600" checked> </label>  </td>  <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900 dark:text-white"><label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center"><input type="checkbox" value="on" id="checkbox2" disabled class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> </label>  </td> </tr>  </tbody> </table></div>  <label class="text-sm rtl:text-right text-red-700 dark:text-red-500 mt-4 flex items-center font-bold italic">Label on the other side <label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center ms-2"><input type="checkbox" value="on" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 ms-2"> </label>  </label> </div>
Svelte
<script>
  import { Checkbox, Table, TableHead, TableHeadCell, TableBody, TableBodyCell, Label, TableBodyRow } from 'flowbite-svelte';
</script>

<Table>
  <TableHead>
    <TableHeadCell>Left column</TableHeadCell>
    <TableHeadCell>Right column</TableHeadCell>
  </TableHead>
  <TableBody tableBodyClass="divide-y dark:divide-gray-700">
    <TableBodyRow class="divide-x rtl:divide-x-reverse dark:divide-gray-700">
      <TableBodyCell><Label for="checkbox1">Default checkbox</Label></TableBodyCell>
      <TableBodyCell><Label for="checkbox2">Disabled checkbox</Label></TableBodyCell>
    </TableBodyRow>
    <TableBodyRow class="divide-x rtl:divide-x-reverse dark:divide-gray-700">
      <TableBodyCell><Checkbox id="checkbox1" checked /></TableBodyCell>
      <TableBodyCell><Checkbox id="checkbox2" disabled /></TableBodyCell>
    </TableBodyRow>
  </TableBody>
</Table>

<Label color="red" class="mt-4 flex items-center font-bold italic">
  Label on the other side <Checkbox class="ms-2" />
</Label>

Checkbox with a link #

Use this example if you want to add an anchor link inside the label of the checkbox component.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6"><label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center"><input type="checkbox" value="on" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> I agree with the
<a href="/" class="text-primary-600 dark:text-primary-500 hover:underline ms-1" data-svelte-h="svelte-s23w0b">terms and conditions</a>
.</label>  </div>
Svelte
<Checkbox>
  I agree with the
  <a href="/" class="text-primary-600 dark:text-primary-500 hover:underline ms-1">terms and conditions</a>
  .
</Checkbox>

Helper text #

Get started with this example if you want to add a secondary helper text for the checkbox component.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6"><label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center"><input type="checkbox" value="on" aria-describedby="helper-checkbox-text" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> Free shipping via Flowbite</label>   <p id="helper-checkbox-text" class="text-xs font-normal text-gray-900 dark:text-gray-300 ps-6">For orders shipped from $25 in books or $29 in other categories</p> </div>
Svelte
<script>
  import { Checkbox, Helper } from 'flowbite-svelte';
</script>

<Checkbox aria-describedby="helper-checkbox-text">Free shipping via Flowbite</Checkbox>
<Helper id="helper-checkbox-text" class="ps-6">For orders shipped from $25 in books or $29 in other categories</Helper>

Bordered #

Use this example of a checkbox inside a card element to enable a larger area of clicking activation.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6"><div class="rounded border border-gray-200 dark:border-gray-700"><label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center w-full p-4"><input type="checkbox" value="on" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> Default radio</label>  </div> <div class="rounded border border-gray-200 dark:border-gray-700"><label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center w-full p-4"><input type="checkbox" value="on" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600" checked> Checked state</label>  </div></div>
Svelte
<div class="rounded border border-gray-200 dark:border-gray-700">
  <Checkbox class="w-full p-4">Default radio</Checkbox>
</div>
<div class="rounded border border-gray-200 dark:border-gray-700">
  <Checkbox checked class="w-full p-4">Checked state</Checkbox>
</div>

Checkbox list group #

Use this example to show a list of checkbox items grouped inside a card.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6"><p class="mb-4 font-semibold text-gray-900 dark:text-white" data-svelte-h="svelte-19cltiq">Technology</p> <ul class="w-48 bg-white rounded-lg border border-gray-200 dark:bg-gray-800 dark:border-gray-600 divide-y divide-gray-200 dark:divide-gray-600"><li><label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center p-3"><input type="checkbox" value="on" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> svelte</label>  </li> <li><label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center p-3"><input type="checkbox" value="on" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> Vue JS</label>  </li> <li><label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center p-3"><input type="checkbox" value="on" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> React</label>  </li> <li><label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center p-3"><input type="checkbox" value="on" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> Angular</label>  </li></ul></div>
Svelte
<p class="mb-4 font-semibold text-gray-900 dark:text-white">Technology</p>
<ul class="w-48 bg-white rounded-lg border border-gray-200 dark:bg-gray-800 dark:border-gray-600 divide-y divide-gray-200 dark:divide-gray-600">
  <li><Checkbox class="p-3">svelte</Checkbox></li>
  <li><Checkbox class="p-3">Vue JS</Checkbox></li>
  <li><Checkbox class="p-3">React</Checkbox></li>
  <li><Checkbox class="p-3">Angular</Checkbox></li>
</ul>

Horizontal list group #

Use this example to show a list of checkbox items inside a card horizontally.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6"><p class="mb-4 font-semibold text-gray-900 dark:text-white" data-svelte-h="svelte-f38di6">Identification</p> <ul class="items-center w-full rounded-lg border border-gray-200 sm:flex dark:bg-gray-800 dark:border-gray-600 divide-x rtl:divide-x-reverse divide-gray-200 dark:divide-gray-600"><li class="w-full"><label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center p-3"><input type="checkbox" value="on" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> Svelte</label>  </li> <li class="w-full"><label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center p-3"><input type="checkbox" value="on" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> Vue JS</label>  </li> <li class="w-full"><label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center p-3"><input type="checkbox" value="on" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> React</label>  </li> <li class="w-full"><label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center p-3"><input type="checkbox" value="on" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> Angular</label>  </li></ul></div>
Svelte
<p class="mb-4 font-semibold text-gray-900 dark:text-white">Identification</p>
<ul class="items-center w-full rounded-lg border border-gray-200 sm:flex dark:bg-gray-800 dark:border-gray-600 divide-x rtl:divide-x-reverse divide-gray-200 dark:divide-gray-600">
  <li class="w-full"><Checkbox class="p-3">Svelte</Checkbox></li>
  <li class="w-full"><Checkbox class="p-3">Vue JS</Checkbox></li>
  <li class="w-full"><Checkbox class="p-3">React</Checkbox></li>
  <li class="w-full"><Checkbox class="p-3">Angular</Checkbox></li>
</ul>

Checkbox dropdown #

Use this example to show a list of checkbox items inside a dropdown menu.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6 flex justify-center items-start h-96"><button type="button" class="text-center font-medium focus-within:ring-4 focus-within:outline-none inline-flex items-center justify-center px-5 py-2.5 text-sm text-white bg-primary-700 hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700 focus-within:ring-primary-300 dark:focus-within:ring-primary-800 rounded-lg">Project users<svg xmlns="http://www.w3.org/2000/svg" fill="none" color="currentColor" class="shrink-0 w-6 h-6 ms-2 text-white dark:text-white" role="img" aria-label="chevron down outline" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 10 4 4 4-4"></path></svg> </button>  <div></div>   </div>
Svelte
<script>
  import { Dropdown, DropdownItem, Checkbox, Button, Search } from 'flowbite-svelte';
  import { ChevronDownOutline, UserRemoveSolid } from 'flowbite-svelte-icons';
</script>

<Button>Project users<ChevronDownOutline class="w-6 h-6 ms-2 text-white dark:text-white" /></Button>
<Dropdown class="overflow-y-auto px-3 pb-3 text-sm h-44">
  <div slot="header" class="p-3">
    <Search size="md" />
  </div>
  <li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
    <Checkbox>Robert Gouth</Checkbox>
  </li>
  <li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
    <Checkbox>Jese Leos</Checkbox>
  </li>
  <li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
    <Checkbox checked>Bonnie Green</Checkbox>
  </li>
  <li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
    <Checkbox>Jese Leos</Checkbox>
  </li>
  <li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
    <Checkbox>Robert Gouth</Checkbox>
  </li>
  <li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
    <Checkbox>Bonnie Green</Checkbox>
  </li>
  <a slot="footer" href="/" class="flex items-center p-3 -mb-1 text-sm font-medium text-red-600 bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-red-500 hover:underline">
    <UserRemoveSolid class="w-5 h-5 me-1" />Delete user
  </a>
</Dropdown>

Inline layout #

You can align the checkbox elements horizontally by using a wrapper tag and applying the flex class.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6"><div class="flex gap-3"><label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center"><input type="checkbox" value="on" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> Inline 1</label>   <label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center"><input type="checkbox" value="on" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> Inline 2</label>   <label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center"><input type="checkbox" value="on" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600" checked> Inline checked</label>   <label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center"><input type="checkbox" value="on" disabled class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> Inline disabled</label>  </div></div>
Svelte
<div class="flex gap-3">
  <Checkbox>Inline 1</Checkbox>
  <Checkbox>Inline 2</Checkbox>
  <Checkbox checked>Inline checked</Checkbox>
  <Checkbox disabled>Inline disabled</Checkbox>
</div>

You can use the property inline as the alternative.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6"><label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 inline-flex items-center me-2"><input type="checkbox" value="on" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> Inline 1</label>   <label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 inline-flex items-center me-2"><input type="checkbox" value="on" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> Inline 2</label>   <label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 inline-flex items-center me-2"><input type="checkbox" value="on" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600" checked> Inline checked</label>   <label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 inline-flex items-center me-2"><input type="checkbox" value="on" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600" disabled> Inline disabled</label>  </div>
Svelte
<Checkbox inline class="me-2">Inline 1</Checkbox>
<Checkbox inline class="me-2">Inline 2</Checkbox>
<Checkbox inline class="me-2" checked>Inline checked</Checkbox>
<Checkbox inline class="me-2" disabled>Inline disabled</Checkbox>

Colors #

 Red    Green    Purple    Teal    Yellow    Orange      
Your custom color 
Svelte
<div class="flex gap-4">
  <Checkbox checked color="red">Red</Checkbox>
  <Checkbox checked color="green">Green</Checkbox>
  <Checkbox checked color="purple">Purple</Checkbox>
  <Checkbox checked color="teal">Teal</Checkbox>
  <Checkbox checked color="yellow">Yellow</Checkbox>
  <Checkbox checked color="orange">Orange</Checkbox>
  <Label class="flex items-center">
    <Checkbox checked inline class="text-sky-400 focus:ring-pink-500" />
    Your custom color
  </Label>
</div>

CheckboxButton #

The special case component - CheckboxButton - is the Checkbox with the Button look and feel. I can be used as standalone element or be wrapped inside ButtonGroup.

This component accepts all props from the Button for styling and Checkbox for behaviour.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6 space-y-4"><div><button type="button" class="text-center font-medium focus-within:ring-4 focus-within:outline-none items-center justify-center px-5 py-2.5 text-sm text-white bg-primary-700 hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700 focus-within:ring-primary-300 dark:focus-within:ring-primary-800 rounded-lg inline-flex"><input type="checkbox" value="on" class="sr-only"> <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="shrink-0 w-6 h-6 me-2" role="img" aria-label="apple solid" viewBox="0 0 24 24"><path d="M17.537 12.625a4.421 4.421 0 0 0 2.684 4.047 10.96 10.96 0 0 1-1.384 2.845c-.834 1.218-1.7 2.432-3.062 2.457-1.34.025-1.77-.794-3.3-.794-1.531 0-2.01.769-3.275.82-1.316.049-2.317-1.318-3.158-2.532-1.72-2.484-3.032-7.017-1.27-10.077A4.9 4.9 0 0 1 8.91 6.884c1.292-.025 2.51.869 3.3.869.789 0 2.27-1.075 3.828-.917a4.67 4.67 0 0 1 3.66 1.984 4.524 4.524 0 0 0-2.16 3.805m-2.52-7.432A4.4 4.4 0 0 0 16.06 2a4.482 4.482 0 0 0-2.945 1.516 4.185 4.185 0 0 0-1.061 3.093 3.708 3.708 0 0 0 2.967-1.416Z"></path></svg> Apple</button>   <button type="button" class="text-center font-medium focus-within:ring-4 focus-within:outline-none items-center justify-center px-5 py-2.5 text-sm text-white bg-primary-700 hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700 focus-within:ring-primary-300 dark:focus-within:ring-primary-800 rounded-lg inline-flex"><input type="checkbox" value="on" class="sr-only"> <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="shrink-0 w-6 h-6 me-2" role="img" aria-label="facebook solid" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M13.135 6H15V3h-1.865a4.147 4.147 0 0 0-4.142 4.142V9H7v3h2v9.938h3V12h2.021l.592-3H12V6.591A.6.6 0 0 1 12.592 6h.543Z" clip-rule="evenodd"></path></svg> Facebook</button>   <button type="button" class="text-center font-medium focus-within:ring-4 focus-within:outline-none items-center justify-center px-5 py-2.5 text-sm text-white bg-primary-700 hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700 focus-within:ring-primary-300 dark:focus-within:ring-primary-800 rounded-lg inline-flex"><input type="checkbox" value="on" class="sr-only"> <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="shrink-0 w-6 h-6 me-2" role="img" aria-label="discord solid" viewBox="0 0 24 24"><path d="M18.942 5.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.586 11.586 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3 17.392 17.392 0 0 0-2.868 11.662 15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.638 10.638 0 0 1-1.706-.83c.143-.106.283-.217.418-.331a11.664 11.664 0 0 0 10.118 0c.137.114.277.225.418.331-.544.328-1.116.606-1.71.832a12.58 12.58 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM8.678 14.813a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.929 1.929 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"></path></svg> Discord</button>   <button type="button" class="text-center font-medium focus-within:ring-4 focus-within:outline-none items-center justify-center px-5 py-2.5 text-sm text-white bg-primary-700 hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700 focus-within:ring-primary-300 dark:focus-within:ring-primary-800 rounded-lg inline-flex"><input type="checkbox" value="on" class="sr-only"> <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="shrink-0 w-6 h-6 me-2" role="img" aria-label="dropbox solid" viewBox="0 0 24 24"><path d="M12.013 6.175 7.006 9.369l5.007 3.194-5.007 3.193L2 12.545l5.006-3.193L2 6.175l5.006-3.194 5.007 3.194ZM6.981 17.806l5.006-3.193 5.006 3.193L11.987 21l-5.006-3.194Z"></path><path d="m12.013 12.545 5.006-3.194-5.006-3.176 4.98-3.194L22 6.175l-5.007 3.194L22 12.562l-5.007 3.194-4.98-3.211Z"></path></svg> Dropbox</button>  </div> <div class="inline-flex rounded-lg shadow-sm" role="group"><button type="button" class="text-center font-medium focus-within:ring-2 focus-within:z-10 items-center justify-center px-4 py-2 text-sm text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus-within:text-primary-700 dark:focus-within:text-white dark:hover:text-white dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600 focus-within:ring-gray-200 dark:focus-within:ring-gray-700 [&amp;:not(:first-child)]:-ms-px first:rounded-s-lg last:rounded-e-lg inline-flex"><input type="checkbox" value="on" class="sr-only"> <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="shrink-0 w-6 h-6 me-2" role="img" aria-label="apple solid" viewBox="0 0 24 24"><path d="M17.537 12.625a4.421 4.421 0 0 0 2.684 4.047 10.96 10.96 0 0 1-1.384 2.845c-.834 1.218-1.7 2.432-3.062 2.457-1.34.025-1.77-.794-3.3-.794-1.531 0-2.01.769-3.275.82-1.316.049-2.317-1.318-3.158-2.532-1.72-2.484-3.032-7.017-1.27-10.077A4.9 4.9 0 0 1 8.91 6.884c1.292-.025 2.51.869 3.3.869.789 0 2.27-1.075 3.828-.917a4.67 4.67 0 0 1 3.66 1.984 4.524 4.524 0 0 0-2.16 3.805m-2.52-7.432A4.4 4.4 0 0 0 16.06 2a4.482 4.482 0 0 0-2.945 1.516 4.185 4.185 0 0 0-1.061 3.093 3.708 3.708 0 0 0 2.967-1.416Z"></path></svg> Apple</button>   <button type="button" class="text-center font-medium focus-within:ring-2 focus-within:z-10 items-center justify-center px-4 py-2 text-sm text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus-within:text-primary-700 dark:focus-within:text-white dark:hover:text-white dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600 focus-within:ring-gray-200 dark:focus-within:ring-gray-700 [&amp;:not(:first-child)]:-ms-px first:rounded-s-lg last:rounded-e-lg inline-flex"><input type="checkbox" value="on" class="sr-only"> <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="shrink-0 w-6 h-6 me-2" role="img" aria-label="facebook solid" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M13.135 6H15V3h-1.865a4.147 4.147 0 0 0-4.142 4.142V9H7v3h2v9.938h3V12h2.021l.592-3H12V6.591A.6.6 0 0 1 12.592 6h.543Z" clip-rule="evenodd"></path></svg> Facebook</button>   <button type="button" class="text-center font-medium focus-within:ring-2 focus-within:z-10 items-center justify-center px-4 py-2 text-sm text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus-within:text-primary-700 dark:focus-within:text-white dark:hover:text-white dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600 focus-within:ring-gray-200 dark:focus-within:ring-gray-700 [&amp;:not(:first-child)]:-ms-px first:rounded-s-lg last:rounded-e-lg inline-flex"><input type="checkbox" value="on" class="sr-only"> <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="shrink-0 w-6 h-6 me-2" role="img" aria-label="discord solid" viewBox="0 0 24 24"><path d="M18.942 5.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.586 11.586 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3 17.392 17.392 0 0 0-2.868 11.662 15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.638 10.638 0 0 1-1.706-.83c.143-.106.283-.217.418-.331a11.664 11.664 0 0 0 10.118 0c.137.114.277.225.418.331-.544.328-1.116.606-1.71.832a12.58 12.58 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM8.678 14.813a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.929 1.929 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"></path></svg> Discord</button>   <button type="button" class="text-center font-medium focus-within:ring-2 focus-within:z-10 items-center justify-center px-4 py-2 text-sm text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus-within:text-primary-700 dark:focus-within:text-white dark:hover:text-white dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600 focus-within:ring-gray-200 dark:focus-within:ring-gray-700 [&amp;:not(:first-child)]:-ms-px first:rounded-s-lg last:rounded-e-lg inline-flex"><input type="checkbox" value="on" class="sr-only"> <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="shrink-0 w-6 h-6 me-2" role="img" aria-label="dropbox solid" viewBox="0 0 24 24"><path d="M12.013 6.175 7.006 9.369l5.007 3.194-5.007 3.193L2 12.545l5.006-3.193L2 6.175l5.006-3.194 5.007 3.194ZM6.981 17.806l5.006-3.193 5.006 3.193L11.987 21l-5.006-3.194Z"></path><path d="m12.013 12.545 5.006-3.194-5.006-3.176 4.98-3.194L22 6.175l-5.007 3.194L22 12.562l-5.007 3.194-4.98-3.211Z"></path></svg> Dropbox</button>  </div> </div>
Svelte
<div>
    <CheckboxButton><AppleSolid class="w-6 h-6 me-2"/>Apple</CheckboxButton>
    <CheckboxButton><FacebookSolid class="w-6 h-6 me-2"/>Facebook</CheckboxButton>
    <CheckboxButton><DiscordSolid class="w-6 h-6 me-2"/>Discord</CheckboxButton>
    <CheckboxButton><DropboxSolid class="w-6 h-6 me-2"/>Dropbox</CheckboxButton>
  </div>

  <ButtonGroup>
    <CheckboxButton><AppleSolid class="w-6 h-6 me-2"/>Apple</CheckboxButton>
    <CheckboxButton><FacebookSolid class="w-6 h-6 me-2"/>Facebook</CheckboxButton>
    <CheckboxButton><DiscordSolid class="w-6 h-6 me-2"/>Discord</CheckboxButton>
    <CheckboxButton><DropboxSolid class="w-6 h-6 me-2"/>Dropbox</CheckboxButton>
  </ButtonGroup>

Advanced layout #

Use this example of an advanced layout of checkbox elements where the label parent element can be styled when the checkbox is checked.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6"><p class="mb-5 text-lg font-medium text-gray-900 dark:text-white" data-svelte-h="svelte-1jw49kr">Choose technology:</p> <div class="grid gap-6 w-full md:grid-cols-3"><label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center"><input type="checkbox" value="on" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 sr-only peer rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> <div class="font-normal p-5 w-full text-gray-500 bg-white rounded-lg border-2 border-gray-200 cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 peer-checked:border-primary-600 hover:text-gray-600 dark:peer-checked:text-gray-300 peer-checked:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700"><svg class="mb-2 w-7 h-7 text-sky-500" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M418.2 177.2c-5.4-1.8-10.8-3.5-16.2-5.1.9-3.7 1.7-7.4 2.5-11.1 12.3-59.6 4.2-107.5-23.1-123.3-26.3-15.1-69.2.6-112.6 38.4-4.3 3.7-8.5 7.6-12.5 11.5-2.7-2.6-5.5-5.2-8.3-7.7-45.5-40.4-91.1-57.4-118.4-41.5-26.2 15.2-34 60.3-23 116.7 1.1 5.6 2.3 11.1 3.7 16.7-6.4 1.8-12.7 3.8-18.6 5.9C38.3 196.2 0 225.4 0 255.6c0 31.2 40.8 62.5 96.3 81.5 4.5 1.5 9 3 13.6 4.3-1.5 6-2.8 11.9-4 18-10.5 55.5-2.3 99.5 23.9 114.6 27 15.6 72.4-.4 116.6-39.1 3.5-3.1 7-6.3 10.5-9.7 4.4 4.3 9 8.4 13.6 12.4 42.8 36.8 85.1 51.7 111.2 36.6 27-15.6 35.8-62.9 24.4-120.5-.9-4.4-1.9-8.9-3-13.5 3.2-.9 6.3-1.9 9.4-2.9 57.7-19.1 99.5-50 99.5-81.7 0-30.3-39.4-59.7-93.8-78.4zM282.9 92.3c37.2-32.4 71.9-45.1 87.7-36 16.9 9.7 23.4 48.9 12.8 100.4-.7 3.4-1.4 6.7-2.3 10-22.2-5-44.7-8.6-67.3-10.6-13-18.6-27.2-36.4-42.6-53.1 3.9-3.7 7.7-7.2 11.7-10.7zM167.2 307.5c5.1 8.7 10.3 17.4 15.8 25.9-15.6-1.7-31.1-4.2-46.4-7.5 4.4-14.4 9.9-29.3 16.3-44.5 4.6 8.8 9.3 17.5 14.3 26.1zm-30.3-120.3c14.4-3.2 29.7-5.8 45.6-7.8-5.3 8.3-10.5 16.8-15.4 25.4-4.9 8.5-9.7 17.2-14.2 26-6.3-14.9-11.6-29.5-16-43.6zm27.4 68.9c6.6-13.8 13.8-27.3 21.4-40.6s15.8-26.2 24.4-38.9c15-1.1 30.3-1.7 45.9-1.7s31 .6 45.9 1.7c8.5 12.6 16.6 25.5 24.3 38.7s14.9 26.7 21.7 40.4c-6.7 13.8-13.9 27.4-21.6 40.8-7.6 13.3-15.7 26.2-24.2 39-14.9 1.1-30.4 1.6-46.1 1.6s-30.9-.5-45.6-1.4c-8.7-12.7-16.9-25.7-24.6-39s-14.8-26.8-21.5-40.6zm180.6 51.2c5.1-8.8 9.9-17.7 14.6-26.7 6.4 14.5 12 29.2 16.9 44.3-15.5 3.5-31.2 6.2-47 8 5.4-8.4 10.5-17 15.5-25.6zm14.4-76.5c-4.7-8.8-9.5-17.6-14.5-26.2-4.9-8.5-10-16.9-15.3-25.2 16.1 2 31.5 4.7 45.9 8-4.6 14.8-10 29.2-16.1 43.4zM256.2 118.3c10.5 11.4 20.4 23.4 29.6 35.8-19.8-.9-39.7-.9-59.5 0 9.8-12.9 19.9-24.9 29.9-35.8zM140.2 57c16.8-9.8 54.1 4.2 93.4 39 2.5 2.2 5 4.6 7.6 7-15.5 16.7-29.8 34.5-42.9 53.1-22.6 2-45 5.5-67.2 10.4-1.3-5.1-2.4-10.3-3.5-15.5-9.4-48.4-3.2-84.9 12.6-94zm-24.5 263.6c-4.2-1.2-8.3-2.5-12.4-3.9-21.3-6.7-45.5-17.3-63-31.2-10.1-7-16.9-17.8-18.8-29.9 0-18.3 31.6-41.7 77.2-57.6 5.7-2 11.5-3.8 17.3-5.5 6.8 21.7 15 43 24.5 63.6-9.6 20.9-17.9 42.5-24.8 64.5zm116.6 98c-16.5 15.1-35.6 27.1-56.4 35.3-11.1 5.3-23.9 5.8-35.3 1.3-15.9-9.2-22.5-44.5-13.5-92 1.1-5.6 2.3-11.2 3.7-16.7 22.4 4.8 45 8.1 67.9 9.8 13.2 18.7 27.7 36.6 43.2 53.4-3.2 3.1-6.4 6.1-9.6 8.9zm24.5-24.3c-10.2-11-20.4-23.2-30.3-36.3 9.6.4 19.5.6 29.5.6 10.3 0 20.4-.2 30.4-.7-9.2 12.7-19.1 24.8-29.6 36.4zm130.7 30c-.9 12.2-6.9 23.6-16.5 31.3-15.9 9.2-49.8-2.8-86.4-34.2-4.2-3.6-8.4-7.5-12.7-11.5 15.3-16.9 29.4-34.8 42.2-53.6 22.9-1.9 45.7-5.4 68.2-10.5 1 4.1 1.9 8.2 2.7 12.2 4.9 21.6 5.7 44.1 2.5 66.3zm18.2-107.5c-2.8.9-5.6 1.8-8.5 2.6-7-21.8-15.6-43.1-25.5-63.8 9.6-20.4 17.7-41.4 24.5-62.9 5.2 1.5 10.2 3.1 15 4.7 46.6 16 79.3 39.8 79.3 58 0 19.6-34.9 44.9-84.8 61.4zm-149.7-15c25.3 0 45.8-20.5 45.8-45.8s-20.5-45.8-45.8-45.8c-25.3 0-45.8 20.5-45.8 45.8s20.5 45.8 45.8 45.8z"></path></svg> <div class="w-full text-lg font-semibold" data-svelte-h="svelte-v0fvv6">React Js</div> <div class="w-full text-sm" data-svelte-h="svelte-13yliw3">A JavaScript library for building user interfaces.</div></div></label>   <label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center"><input type="checkbox" value="on" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 sr-only peer rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> <div class="font-normal p-5 w-full text-gray-500 bg-white rounded-lg border-2 border-gray-200 cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 peer-checked:border-primary-600 hover:text-gray-600 dark:peer-checked:text-gray-300 peer-checked:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700"><svg class="mb-2 w-7 h-7 text-green-400" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M356.9 64.3H280l-56 88.6-48-88.6H0L224 448 448 64.3h-91.1zm-301.2 32h53.8L224 294.5 338.4 96.3h53.8L224 384.5 55.7 96.3z"></path></svg> <div class="w-full text-lg font-semibold" data-svelte-h="svelte-15n4oun">Vue Js</div> <div class="w-full text-sm" data-svelte-h="svelte-bb0cu">Vue.js is an model–view front end JavaScript framework.</div></div></label>   <label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center"><input type="checkbox" value="on" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 dark:bg-gray-700 dark:border-gray-600 sr-only peer rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"> <div class="font-normal p-5 w-full text-gray-500 bg-white rounded-lg border-2 border-gray-200 cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 peer-checked:border-primary-600 hover:text-gray-600 dark:peer-checked:text-gray-300 peer-checked:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700"><svg class="mb-2 w-7 h-7 text-red-600" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M185.7 268.1h76.2l-38.1-91.6-38.1 91.6zM223.8 32L16 106.4l31.8 275.7 176 97.9 176-97.9 31.8-275.7zM354 373.8h-48.6l-26.2-65.4H168.6l-26.2 65.4H93.7L223.8 81.5z"></path></svg> <div class="w-full text-lg font-semibold" data-svelte-h="svelte-pg0fyc">Angular</div> <div class="w-full text-sm" data-svelte-h="svelte-9ebms8">A TypeScript-based web application framework.</div></div></label>  </div></div>
Svelte
<script>
  import { Checkbox } from 'flowbite-svelte';
  import React from '../../utils/icons/React.svelte';
  import Vue from '../../utils/icons/Vue.svelte';
  import Angular from '../../utils/icons/Angular.svelte';
</script>

<p class="mb-5 text-lg font-medium text-gray-900 dark:text-white">Choose technology:</p>
<div class="grid gap-6 w-full md:grid-cols-3">
  <Checkbox custom>
    <div class="font-normal p-5 w-full text-gray-500 bg-white rounded-lg border-2 border-gray-200 cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 peer-checked:border-primary-600 hover:text-gray-600 dark:peer-checked:text-gray-300 peer-checked:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">
      <React />
      <div class="w-full text-lg font-semibold">React Js</div>
      <div class="w-full text-sm">A JavaScript library for building user interfaces.</div>
    </div>
  </Checkbox>
  <Checkbox custom>
    <div class="font-normal p-5 w-full text-gray-500 bg-white rounded-lg border-2 border-gray-200 cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 peer-checked:border-primary-600 hover:text-gray-600 dark:peer-checked:text-gray-300 peer-checked:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">
      <Vue />
      <div class="w-full text-lg font-semibold">Vue Js</div>
      <div class="w-full text-sm">Vue.js is an model–view front end JavaScript framework.</div>
    </div>
  </Checkbox>
  <Checkbox custom>
    <div class="font-normal p-5 w-full text-gray-500 bg-white rounded-lg border-2 border-gray-200 cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 peer-checked:border-primary-600 hover:text-gray-600 dark:peer-checked:text-gray-300 peer-checked:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">
      <Angular />
      <div class="w-full text-lg font-semibold">Angular</div>
      <div class="w-full text-sm">A TypeScript-based web application framework.</div>
    </div>
  </Checkbox>
</div>

Group variable #

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6"><div class="flex gap-2"><label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center" for="checkbox-0">One <input id="checkbox-0" type="checkbox" value="1" name="flavours" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 ms-2">  </label> <label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center" for="checkbox-1">Two <input id="checkbox-1" type="checkbox" value="2" name="flavours" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 ms-2" checked>  </label> <label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 flex items-center" for="checkbox-2">Three <input id="checkbox-2" type="checkbox" value="3" name="flavours" class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 ms-2" checked>  </label>  </div> <div class="my-2 border border-gray-200 dark:border-gray-700 rounded-lg p-2 w-44 dark:text-gray-400">Group: 2,3</div> <button type="button" class="text-center font-medium focus-within:ring-4 focus-within:outline-none inline-flex items-center justify-center px-5 py-2.5 text-sm text-white bg-primary-700 hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700 focus-within:ring-primary-300 dark:focus-within:ring-primary-800 rounded-lg">Clear</button> </div>
Svelte
<script>
  import { Button, Checkbox } from 'flowbite-svelte';
  let choices = [
    { value: '1', label: 'One'},
    { value: '2', label: 'Two'},
    { value: '3', label: 'Three' }
  ]
  let group = ['2', '3'];
</script>

<div class="flex gap-2">
  <Checkbox name="flavours" {choices} bind:group groupInputClass='ms-2'/>
</div>
<div class="my-2 border border-gray-200 dark:border-gray-700 rounded-lg p-2 w-44 dark:text-gray-400">Group: {group}</div>
<Button on:click={() => (group.length = 0)}>Clear</Button>

Component data #

The component has the following props, type, and default values. See types page for type information.

Checkbox styling #

Use the class prop to overwrite the label and input tag class.

Helper styling #

Use the class prop to overwrite the p tag class.

References #

Flowbite Checkbox

File input