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.

Small icon input Default icon input Large icon input

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.

Your name

Well done! Some success message.

Your name

Oh, snapp! Some error message.

Input with icon

Small input - left icon

Default input - right icon

Large input - both icons

Input group

This example can be used to add a descriptive icon or additional text inside the input field.

Small additional text

Default additional text

.com

Large additional text

.com

Grouped with button

Crazy example

http://

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`:

Your password

Helper text

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

Your email

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

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`.

Your Email

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`.