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

Input field

The input field is an important part of the form element that can be used to create interactive controls to accept data from the user based on multiple input types, such as text, email, number, password, URL, phone number, and more. On this page you will find all of the input types based on multiple variants, styles, colors, and sizes built with the utility classes from Tailwind CSS and components from Flowbite.

Input fields

Use this example as a generic form element which includes multiple input fields types such as text, email, password, number, URL, and phone number and use the grid layout to add multiple columns and rows.

Input sizes

Use the following examples to apply a small, default or large size for the input fields. 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 state

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.

Validation

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

Well done! Some success message.

Oh, snapp! Some error message.

Input with icon

Input group

This example can be used to add a descriptive icon or additional text inside the input field.
@
.com
@
.com
@
http://
@
kg

Icon click handler

This example shows how to add `on:click` event handler to the icon in `Input`. By clicking an icon, it toggles icon and `type`:

Helper text

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

Number input

By default the `Input` component binds the `value` as `string`. If you need a variable bound as `number` you need to use a specialised version of `Input` called `NumberInput`.

Value: 5

Type of value: number

Search input

Dropdown

Use this example to show a dropdown menu right next to the input field.

Advanced usage

If you need a full control over `input` HTML element while still re-using the Flowbite formatting, you can put the `input` element as a default slot. The example below is in fact the implementation of the above mentioned `NumberInput`.
#