Checkbox Components

Examples

<script>
import { Checkbox } from 'flowbite-svelte'
let checkboxOptions= [
  {
    id: 'checkbox-1',
    name:'checkbox1',
    label:'Default checkbox'
  },
  {
    id: 'checkbox-2',
    name:'checkbox1',
    checked: true,
    label: 'Checked state'
  }
]
</script>

<Checkbox options={checkboxOptions} {legend} />

Disabled state

<script>

let checkboxOptions2= [
  {
    id: 'disabled-1',
    name:'checkbox2',
    label:'Disabled checkbox',
  },
  {
    id: 'disabled-2',
    name:'checkbox2',
    checked: true,
    label: 'Disabled checked',
  }
]

</script>

{#each checkboxOptions2 as option}
<Checkbox {...option} disabled divClass="flex items-center mb-4" />
{/each}

Checkbox with a link

<script>
let checkboxOptions3= [
  {
    id: 'link',
    name:'checkbox3',
    label:'I agree with the <a href="#" class="text-blue-600 dark:text-blue-500 hover:underline">terms and conditions</a>.',
  }
]

</script>

{#each checkboxOptions3 as option}
<Checkbox {...option} />
{/each}

Helper text

<script>
let checkboxOptions4= [
  {
    id: 'helper',
    name:'checkbox4',
    label:'Free shipping via Flowbite',
    helper:'For orders shipped from $25 in books or $29 in other categories'
  }
]

</script>

{#each checkboxOptions4 as option}
<Checkbox {...option} />
{/each}

Inline

<script>
import { Checkbox, CheckboxInline } from 'flowbite-svelte'

let checkboxOptions5= [
  {
    id: 'inline',
    name:'checkbox5',
    label:'Inline 1',
  },
  {
    id: 'inline2',
    name:'checkbox5',
    label:'Inline 2',
  },
  {
    id: 'inline3',
    name:'checkbox5',
    label:'Inline checked',
    checked:true,
  },
  {
    id: 'inline4',
    name:'checkbox5',
    label:'Inline disabled',
    disabled:true
  },
]

</script>

<CheckboxInline>
{#each checkboxOptions5 as option}
<Checkbox {...option} />
{/each}
</CheckboxInline>

Colors

<script>

let checkboxOptions6 =[
  {
    id: 'red',
    name: 'color',
    value:'red',
    label: 'Red',
    color: 'red',
    checked:true
  },
  {
    id: 'green',
    name: 'color',
    value:'green',
    label: 'Green',
    color:'green',
    checked:true
  },
  {
    id: 'purple',
    name: 'color',
    value:'purple',
    label: 'Purple',
    color: 'purple',
    checked:true
  },
  {
    id: 'teal',
    name: 'color',
    value:'teal',
    label: 'Teal',
    color: 'teal',
    checked:true
  },
  {
    id: 'yellow',
    name: 'color',
    value:'yellow',
    label: 'Yellow',
    color: 'yellow',
    checked:true
  },
  {
    id: 'orange',
    name: 'color',
    value:'orange',
    label: 'Orange',
    color: 'orange',
    checked:true
  }
]

</script>

<CheckboxInline>
{#each checkboxOptions6 as option}
<Checkbox {...option} />
{/each}
</CheckboxInline>

Props

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

Related components

Checkbox

File input

Floating label

Input

Radio

Range

Search

Select

Textarea

Toggle

References

Flowbite Forms