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.

  • 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.

  • 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.

  • 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 class="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 divClass="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.

  • Svelte
<Checkbox>
  I agree with the
  <a href="/" class="text-primary-600 dark:text-primary-500 ms-1 hover:underline">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.

  • 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.

  • Svelte
<div class="rounded-sm border border-gray-200 dark:border-gray-700">
  <Checkbox divClass="w-full p-4">Default radio</Checkbox>
</div>
<div class="rounded-sm border border-gray-200 dark:border-gray-700">
  <Checkbox checked divClass="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.

  • Svelte
<p class="mb-4 font-semibold text-gray-900 dark:text-white">Technology</p>
<Listgroup class="w-48">
  <li><Checkbox divClass="p-3">svelte</Checkbox></li>
  <li><Checkbox divClass="p-3">Vue JS</Checkbox></li>
  <li><Checkbox divClass="p-3">React</Checkbox></li>
  <li><Checkbox divClass="p-3">Angular</Checkbox></li>
</Listgroup>

You can use the internal loop to render a list of CheckboxItems.

  • Svelte
<script>
  import { Checkbox, Listgroup } from "flowbite-svelte";
  let choices = [
    { value: "svelte", label: "svelte" },
    { value: "vue", label: "Vue JS" },
    { value: "react", label: "React", checked: true },
    { value: "angular", label: "Angular" }
  ];
  let group = $state([]);
</script>

<p class="my-2">Choices: {group.join(", ")}</p>
<Listgroup class="w-48">
  <Checkbox bind:group {choices} divClass="p-3" />
</Listgroup>

Horizontal list group #

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

  • Svelte
<p class="mb-4 font-semibold text-gray-900 dark:text-white">Identification</p>
<ul class="w-full items-center divide-x divide-gray-200 rounded-lg border border-gray-200 sm:flex rtl:divide-x-reverse dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-800">
  <li class="w-full"><Checkbox divClass="p-3">Svelte</Checkbox></li>
  <li class="w-full"><Checkbox divClass="p-3">Vue JS</Checkbox></li>
  <li class="w-full"><Checkbox divClass="p-3">React</Checkbox></li>
  <li class="w-full"><Checkbox divClass="p-3">Angular</Checkbox></li>
</ul>

Checkbox dropdown #

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

  • Svelte
<script>
  import { Dropdown, DropdownItem, DropdownGroup, Checkbox, Button, Search } from "flowbite-svelte";
  import { ChevronDownOutline, UserRemoveSolid } from "flowbite-svelte-icons";
</script>

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

Inline layout #

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

  • 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.

  • Svelte
<Checkbox inline divClass="me-2">Inline 1</Checkbox>
<Checkbox inline divClass="me-2">Inline 2</Checkbox>
<Checkbox inline divClass="me-2" checked>Inline checked</Checkbox>
<Checkbox inline divClass="me-2" disabled>Inline disabled</Checkbox>

Colors #

Red
Green
Purple
Teal
Yellow
Orange
  • Svelte
<div class="flex flex-col gap-4 sm:flex-row">
  <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. It 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.

  • Svelte
<script>
  import { ButtonGroup, CheckboxButton } from "flowbite-svelte";
  import { AppleSolid, FacebookSolid, DiscordSolid, DropboxSolid } from "flowbite-svelte-icons";
  let group = $state([]);
</script>

<div>
  <CheckboxButton bind:group value="Apple"><AppleSolid class="me-2 h-6 w-6" />Apple</CheckboxButton>
  <CheckboxButton bind:group value="Facebook"><FacebookSolid class="me-2 h-6 w-6" />Facebook</CheckboxButton>
  <CheckboxButton bind:group value="Discord"><DiscordSolid class="me-2 h-6 w-6" />Discord</CheckboxButton>
  <CheckboxButton bind:group value="Dropbox"><DropboxSolid class="me-2 h-6 w-6" />Dropbox</CheckboxButton>
</div>

<ButtonGroup>
  <CheckboxButton bind:group value="Apple"><AppleSolid class="h-6 w-6" />Apple</CheckboxButton>
  <CheckboxButton bind:group value="Facebook"><FacebookSolid class="h-6 w-6" />Facebook</CheckboxButton>
  <CheckboxButton bind:group value="Discord"><DiscordSolid class="h-6 w-6" />Discord</CheckboxButton>
  <CheckboxButton bind:group value="Dropbox"><DropboxSolid class="h-6 w-6" />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.

  • 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 w-full gap-6 md:grid-cols-3">
  <Checkbox custom>
    <div class="peer-checked:border-primary-600 w-full cursor-pointer rounded-lg border-2 border-gray-200 bg-white p-5 font-normal text-gray-500 peer-checked:text-gray-600 hover:bg-gray-50 hover:text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:peer-checked:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-300">
      <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="peer-checked:border-primary-600 w-full cursor-pointer rounded-lg border-2 border-gray-200 bg-white p-5 font-normal text-gray-500 peer-checked:text-gray-600 hover:bg-gray-50 hover:text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:peer-checked:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-300">
      <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="peer-checked:border-primary-600 w-full cursor-pointer rounded-lg border-2 border-gray-200 bg-white p-5 font-normal text-gray-500 peer-checked:text-gray-600 hover:bg-gray-50 hover:text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:peer-checked:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-300">
      <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 #

  • 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 />
</div>
<div class="my-2 w-44 rounded-lg border border-gray-200 p-2 dark:border-gray-700 dark:text-gray-400">Group: {group}</div>
<Button onclick={() => (group.length = 0)}>Clear</Button>

Component data #

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

References #

Fileupload