Flowbite Svelte: v0.46.14
Svelte: v5.0.0-next.179
SvelteKit: v2.5.18
Vite: v5.3.3

Forms

The Input component allows you to change the input size, add disabled, helper text, and floating label.

Input Sizes

User the size prop to change the input size. Choose one from 'sm:text-md' | 'text-sm' | 'sm:text-xs'. The default size is text-sm.

Disabled

Get started with this example if you want to apply the disabled state to an input field. Add the disabled to change the input to disabled.

Helper text

Use the helper prop to add your helper text. You can use HTML in the helper text.

We’ll never share your details. Read our Privacy Policy .

Input element with icon

With the Input component, you can add Heroicons or other icon sets.

Input element with addon

Form validation

Use the following example to apply validation styles for success and error messages.

Well done! Some success message.

Not so well done! Some error message.

Textarea

Select input

Get started with the default example of a select input component to get a single option selection.

MultiSelect

Checkbox

Radio buttons

File upload

Toggle Switch