Input field Components

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

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.

Examples

<script>
import { Input } from 'flowbite-svelte'
</script>
<Input
  class="mb-6"
  id="large-input"
  name="size"
  type="text"
  size="sm:text-md"
  value="large"
  placeholder="Write your text here."
  label="Large input"
  required
  />
<Input class="mb-6" placeholder="Base input" label="Base input"/>
<Input class="mb-6" size="sm:text-xs" placeholder="Small input" label="Small input"/>

Focus on load

To focus on an input field and a textarea field on load create a `ref` variable and bind it in an Input component. Add a `onMount` function as followings.

In the next example, when you reload/refresh the page, the First name field is focused on load.

If you want to use this on your website, your link to the page must have `rel="external"`.

<script>
import { onMount } from 'svelte';
let ref

onMount(() => {
  ref.focus();
});
</script>

<Input class="mb-6" placeholder="First name" label="First name" bind:ref/>
<Input class="mb-6" placeholder="Last name" label="Last name"/>

Disabled

Add the disabled prop to change the input to disabled.

<Input class="mb-6" disabled placeholder="disabled input" label="Disabled input"/>
<Input class="mb-6" disabled readonly placeholder="disabled readonly" label="Disabled readonly input"/>

Helper text

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

<Input label="Email" id="email" name="email" required placeholder="Your email" helper="You can add helper text in <b>HTML</b>."/>

Icon input

With the Iconinput component, you can add Heroicons or Simple-icons. Use iconClass to modify the icon color.

<script>
  import { Iconinput } from 'flowbite-svelte'
</script>
<Iconinput id="email" type="email" name="email" placeholder="Your email" label="Border" icon={AtSymbolOutline} iconClass="h-4 w-4 mr-2 text-blue-500 dark:text-red-500"/>
<div class="py-4">
<Iconinput noBorder id="email" type="email" name="email" label="No border" icon={MailOutline} iconClass="h-4 w-4 mr-2 text-blue-500 dark:text-green-500"/>

Props

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

Input

Iconinput

Related components

Checkbox

File input

Floating label

Input

Radio

Range

Search

Select

Textarea

Toggle

References

Flowbite Forms