Forms

Use the Tailwind CSS form and input elements such as checkboxes, radios, textarea, text inputs to collect information from users with Flowbite

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

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

<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" />

Helper text

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

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

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

Input element with icon

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>

Input element with addon

<script>
  import { Iconinput } from 'flowbite-svelte'
</script>
<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>

Form validation

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

Well done! Some success messsage.

Well done! Some success messsage.

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

Textarea

<script>
import { Textarea } from 'flowbite-svelte'
let textareaprops = {
  id: 'message',
  name: 'message',
  label: 'Your message',
  rows: 4,
  placeholder: 'Leave a comment...',
};
</script>

<Textarea {...textareaprops} />

Select input

Get started with the default example of a select input component to get a single option selection.

<script>
  import { Select} from 'flowbite-svelte'

  let selected;

  let countries = [
    {value:"us", name: "United States"},
    {value:"ca", name: "Canada"},
    {value:"fr", name: "France"},
  ]
</script>

<Label>Select an option
  <Select class="mt-2" items={countries} bind:value={selected} />
</Label>

Checkbox

<script>
	import { Checkbox, Label, Helper } from 'flowbite-svelte';
</script>

<Checkbox>Default checkbox</Checkbox>
<Checkbox checked>Checked state</Checkbox>

Radio buttons

<script>
	import { Radio, Label, Helper } from 'flowbite-svelte';
</script>

<Radio name="example">Default radio</Radio>
<Radio name="example" checked>Checked state</Radio>

File upload

<script>
import { Fileupload } from 'flowbite-svelte'

let fileuploadprops = {
  id : 'user_avatar'
}

let fileuploadprops2 = {
  id : 'user_avatar2'
}
</script>

<Fileupload {...fileuploadprops} />

Toggle Switch

<script>
  import { Toggle } from 'flowbite-svelte'
</script>

<Toggle>Toggle me</Toggle>
<Toggle checked>Checked toggle</Toggle>
<Toggle disabled>Disabled toggle</Toggle>
<Toggle checked disabled>Disabled checked</Toggle>

Props

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

Input

Name Type Default
type InputType 'text'
value string ''
size 'sm' | 'md' | 'lg' 'md'
inputClass string 'block w-full border disabled:cursor-not-allowed disabled:opacity-50 rounded-lg'
color 'base' | 'green' | 'red' 'base'

Label

Name Type Default
color 'gray' | 'green' | 'red' | 'disabled' 'gray'
defaultClass string 'text-sm font-medium block'

Helper

Name Type Default
helperClass string 'text-xs font-normal text-gray-500 dark:text-gray-300'
color 'gray' | 'green' | 'red' | 'disabled' 'gray'

Iconinput

Name Type Default
type InputType 'text'
value string ''
size 'sm' | 'md' | 'lg' 'md'
icon typeof SvelteComponent
noBorder boolean false
inputClass string 'rounded-none rounded-r-lg bg-gray-50 border border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
spanClass string 'inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 rounded-l-md border border-r-0 border-gray-300 dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600'
noBorderInputClass string 'bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
noBorderDivClass string 'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none'
iconClass string 'mr-2'

Fileupload

Name Type Default
value string ''
size 'xs' | 'sm' | 'lg' 'sm'
inputClass string 'block w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400'

Textarea

Name Type Default
value string ''
id string generateId()
name string 'message'
label string 'Your message'
rows number 4
placeholder string 'Leave a comment...'
labelClass string 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400'
textareaClass string 'block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
helper string ''
helperClass string 'mt-2 text-sm text-gray-500 dark:text-gray-400'

Select

Name Type Default
items SelectOptionType[] []
value string | number
placeholder string 'Choose option ...'
underline boolean false
size 'sm' | 'md' | 'lg' 'md'
defaultClass string 'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
underlineClass string 'text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer'

Checkbox

Name Type Default
color FormColorType 'blue'
custom boolean false
inline boolean false
group string[] []
value string ''
checked boolean undefined

Radio

Name Type Default
color FormColorType 'blue'
custom boolean false
inline boolean false
group number | string ''
value string ''

Toggle

Name Type Default
size 'small' | 'default' | 'large' 'default'
group string[] []
value string ''
checked boolean undefined

References