Checkbox Components

Examples

I agree to the <a href="#" class="text-blue-600 hover:underline dark:text-blue-500">terms and conditions</a>

I want to get promotional offers

Eligible for international shipping (disabled)

Free shipping via Flowbite

For orders shipped from Flowbite from € 25 in books or € 29 on other categories

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

let legend = 'Checkbox variants';
let checkboxOptions= [
  {
    id: 'checkbox-1',
    checked: true,
    label:
      'I agree to the <a href="#" class="text-blue-600 hover:underline dark:text-blue-500">terms and conditions</a>'
  },
  {
    id: 'checkbox-2',
    label: 'I want to get promotional offers'
  },
  {
    id: 'checkbox-3',
    label: 'Eligible for international shipping (disabled)',
    disabled: true
  },
  {
    id: 'checkbox-4',
    label: 'Free shipping via Flowbite',
    helper:
      "For orders shipped from Flowbite from <span class='font-medium'>€ 25</span> in books or <span>€ 29</span> on other categories</span>"
  }
]
</script>

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

Signle checkbox

Remember me

<SingleCheckbox name="rememberme" id="rememberme" required label="Remember me" />

Props

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

SingleCheckbox

Name	Type	Default
checked	boolean	false
id	string	generateId()
required	boolean	false
label	string	-
name	string	-
inputClass	string	'w-4 h-4 bg-gray-50 rounded border border-gray-300 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800'
labelClass	string	'font-medium text-gray-900 dark:text-gray-300'

Checkbox

Name	Type	Default
legend	string	'Checkbox variants'
divClass	string	'flex items-center mb-4'
inputClass	string	'w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600'
labelClass	string	'ml-3 text-sm font-medium text-gray-900 dark:text-gray-300'
helperLabelClass	string	'font-medium text-gray-900 dark:text-gray-300'
options	CheckboxType[]	-

Related components

References

Flowbite Forms