Input 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, Label } from 'flowbite-svelte'
</script>
<div class='mb-6'>
  <Label for='large-input' class='block mb-2'>Large input</Label>
  <Input id="large-input" size="lg" placeholder="Large input" />
</div>
<div class='mb-6'>
  <Label for='default-input' class='block mb-2'>Default input</Label>
  <Input id='default-input' placeholder="Default input" />
</div>
<div class='mb-6'>
  <Label for='large-input' class='block mb-2'>Small input</Label>
  <Input size="sm" placeholder="Small input" label="Small input"/>
</div>

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.

<Input id="disabled-input" class="mb-6" disabled value="Disabled input" />
<Input id="disabled-input-2" class="mb-6" disabled readonly value="Disabled readonly input" />

Validation

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

<div class="mb-6">
  <Label for='success' color='green' class='block mb-2'>Your name</Label>
  <Input id='success' color='green' placeholder="Success input" />
  <Helper class='mt-2' color='green'><span class="font-medium">Well done!</span> Some success messsage.</Helper>
</div>
<div class="mb-6">
  <Label for='error' color='red' class='block mb-2'>Your name</Label>
  <Input id='success' color='red' placeholder="Success input" />
  <Helper class='mt-2' color='red'><span class="font-medium">Well done!</span> Some success messsage.</Helper>
</div>

Input group

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

With the Iconinput component, you can add Heroicons or other icon sets. Use iconClass to modify the icon color.

<script>
  import { Iconinput } from 'flowbite-svelte'
</script>
<div class="mb-6">
  <Label for="input-group-1" class="block mb-2">Your Email</Label>
  <Iconinput noBorder id="email" type="email" icon={Mail} iconClass="h-4 w-4 mr-2 dark:text-green-500" placeholder="name@flowbite.com" />
</div>
<div class="mb-6">
  <Label for="website-admin" class="block mb-2">Username</Label>
  <Iconinput id="website-admin" placeholder="elonmusk" label="Border" icon={AtSymbol} iconClass="h-4 w-4 mr-2 dark:text-red-500"/>
</div>

Helper text

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

<Label class='block mb-2' >Your email</Label>
<Input label="Email" id="email" name="email" required placeholder="name@flowbite.com"/>
<Helper class='text-sm mt-2'>We’ll never share your details. Read our <a href="/" class="font-medium text-blue-600 hover:underline dark:text-blue-500">Privacy Policy</a>.</Helper>

Search input

<form>
  <Label for="search" class="block mb-2">Your Email</Label>
  <div class="relative">
  <Iconinput noBorder id="search" icon={Search} iconClass="h-5 w-5 mr-2 dark:text-green-500" placeholder="Search" class="p-4" />
  <Button textSize="text-sm" class="text-white absolute right-2.5 bottom-2" type="submit">Submit</Button>
  </div>
</form>

Props

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

Input

Iconinput

Related components

References