--- layout: formLayout title: Svelte Input Fields - Flowbite breadcrumb_title: Input fields dir: Forms description: Get started with a collection of input fields built with Tailwind CSS to start accepting data from the user based on multiple sizes, variants, and input types --- Home {dir} {breadcrumb_title} {title} {description} Input 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. ```html ``` 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. ```svelte example hideScript ``` 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. ```svelte example hideScript class="space-y-6" Small icon input Default icon input Large icon input ``` 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. ```svelte example hideScript ``` Use the following example to apply validation styles for success and error messages. ```svelte example hideScript

Your name Well done! Some success messsage.

Your name Oh, snapp! Some error message.

``` ```svelte example hideScript class="space-y-6" Small input - left icon Default input - right icon Large input - both icons ``` This example can be used to add a descriptive icon or additional text inside the input field. ```svelte example hideScript class="space-y-6"

Small additional text @

Default additional text .com

Large additional text @ .com

Groupped with button @

Crazy example http:// @ kg

``` This example shows how to add `on:click` event handler to the icon in `Input`. By clicking an icon, it toggles icon and `type`: ```svelte example class="space-y-6"

Your password

``` Use the helper prop to add your helper text. You can use HTML in the helper text. ```svelte example hideScript Your email We’ll never share your details. Read our Privacy Policy. ``` 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`. ```svelte example Your Email

Value: {value}

Type of value: {typeof value}

``` ```svelte example hideScript ``` Use this example to show a dropdown menu right next to the input field. ```svelte example Shopping Images News Finance ``` If you need a full control over `input` HTML element while still re-using the Flowbite formating, you can put the `input` element as a default slot. The example below is in fact the implementation of the above mentioned `NumberInput`. ```svelte example class="space-y-4"

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

Input

on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste on:input