Svelte Label - Flowbite

The Label components are used throughout the library and you can use it for your app as well

Label #

Use the Label component when you need to add a label.

<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 text-red-700 dark:text-red-500 mt-4 flex items-center font-bold italic"><label class="text-sm rtl:text-right font-medium text-gray-900 dark:text-gray-300 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 dark:bg-gray-700 dark:border-gray-600 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 me-2"> </label>   Your Label</label> </div>
Svelte
<script>
  import { Label, Checkbox } from 'flowbite-svelte';
</script>

<Label color="red" class="mt-4 flex items-center font-bold italic">
  <Checkbox class="me-2" /> Your Label
</Label>

Component data #

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

Label styling #

Use the class prop to overwrite defaultClass.

Close button

Toolbar