Checkbox Components

Examples

Default checkbox

Checked state

<script>
import { Checkbox, Label, Helper } from 'flowbite-svelte'
</script>

<div class="flex items-center mb-4">
  <Checkbox id='default-checkbox' value='' />
  <Label for='default-checkbox' class='ml-2'>Default checkbox</Label>
</div>
<div class="flex items-center mb-4">
  <Checkbox checked id='checked-checkbox' value='' />
  <Label for='checked-checkbox' class='ml-2'>Checked state</Label>
</div>

Disabled state

Disabled checkbox

Disabled checked

<div class="flex items-center mb-4">
  <Checkbox disabled id='disabled-checkbox' value='' />
  <Label color='disabled' for='disabled-checkbox' class='ml-2'>Disabled checkbox</Label>
</div>
<div class="flex items-center mb-4">
  <Checkbox disabled checked id='disabled-checked-checkbox' value='' />
  <Label color='disabled' for='disabled-checked-checkbox' class='ml-2'>Disabled checked</Label>
</div>

Checkbox with a link

I agree with the terms and conditions.

<div class="flex items-center mb-4">
  <Checkbox id='link-checkbox' value='' />
  <Label for='link-checkbox' class='ml-2'>I agree with the <a href="/" class="text-blue-600 dark:text-blue-500 hover:underline">terms and conditions</a>.</Label>
</div>

Helper text

Free shipping via Flowbite

For orders shipped from $25 in books or $29 in other categories

<div class="flex">
  <div class="flex items-center h-5">
    <Checkbox id='helper-checkbox' aria-describedby="helper-checkbox-text" value='' />
  </div>
  <div class="ml-2 text-sm">
    <Label for='helper-checkbox'>Free shipping via Flowbite</Label>
    <Helper>For orders shipped from $25 in books or $29 in other categories</Helper>
  </div>
</div>

Inline

Inline 1

Inline 2

Inline checked

Inline disabled

<div class="flex">
  <div class="flex items-center mr-4">
    <Checkbox id='inline-checkbox' value='' />
    <Label for='inline-checkbox' class='ml-2'>Inline 1</Label>
  </div>
  <div class="flex items-center mr-4">
    <Checkbox id='inline-2-checkbox' value='' />
    <Label for='inline-2-checkbox' class='ml-2'>Inline 2</Label>
  </div>
  <div class="flex items-center mr-4">
    <Checkbox checked id='inline-checked-checkbox' value='' />
    <Label for='inline-checked-checkbox' class='ml-2'>Inline checked</Label>
  </div>
  <div class="flex items-center mr-4">
    <Checkbox disabled id='inline-disabled-checkbox' value='' />
    <Label color='disabled' for='inline-disabled-checkbox' class='ml-2'>Inline disabled</Label>
  </div>
</div>

Colors

<div class="flex">
  <div class="flex items-center mr-4">
      <Checkbox checked color='red' id="red-checkbox" value="" />
      <Label for='red-checkbox' class='ml-2'>Red</Label>
  </div>
  <div class="flex items-center mr-4">
      <Checkbox checked color='green' id="green-checkbox" value="" />
      <Label for='green-checkbox' class='ml-2'>Green</Label>
  </div>
  <div class="flex items-center mr-4">
      <Checkbox checked color='purple' id="purple-checkbox" value="" />
      <Label for='purple-checkbox' class='ml-2'>Purple</Label>
  </div>
  <div class="flex items-center mr-4">
      <Checkbox checked color='teal' id="teal-checkbox" value="" />
      <Label for='teal-checkbox' class='ml-2'>Teal</Label>
  </div>
  <div class="flex items-center mr-4">
      <Checkbox checked color='yellow' id="yellow-checkbox" value="" />
      <Label for='yellow-checkbox' class='ml-2'>Yellow</Label>
  </div>
  <div class="flex items-center mr-4">
      <Checkbox checked color='orange' id="orange-checkbox" value="" />
      <Label for='orange-checkbox' class='ml-2'>Orange</Label>
  </div>
</div>

Props

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

Checkbox

Name	Type	Default
inputClass	string	'w-4 h-4 bg-gray-100 rounded border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 '
checked	boolean	false
color	FormColorType	'blue'

Label

Name	Type	Default
color	'gray' \| 'green' \| 'red' \| 'disabled'	'gray'
labelClass	string	'text-sm font-medium'

Helper

Name	Type	Default
helperClass	string	'text-xs font-normal text-gray-500 dark:text-gray-300'
color	'gray' \| 'green' \| 'red' \| 'disabled'	'gray'

Related components

References

Flowbite Forms