Svelte Forms - Flowbite

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.

 Large input        
 Default input        
 Small input        
Svelte
<script>
  import { Label, Input } 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="small-input" class="block mb-2">Small input</Label>
  <Input id="small-input" size="sm" placeholder="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.

             
Svelte
<script>
  import { Label, Input } from 'flowbite-svelte';
</script>

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

Your email

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

Svelte

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

<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-primary-600 hover:underline dark:text-primary-500"> Privacy Policy </a>
  .
</Helper>

Input element with icon #

With the Input component, you can add Heroicons or other icon sets.

Your Email                   
Svelte
<script>
  import { Label, Input, InputAddon, ButtonGroup } from 'flowbite-svelte';
  import { Icon } from 'flowbite-svelte-icons';
</script>

<div class="mb-6">
  <Label for="input-group-1" class="block mb-2">Your Email</Label>
  <Input id="email" type="email" placeholder="name@flowbite.com">
    <Icon name="envelope-solid" slot="left" class="w-5 h-5 text-gray-500 dark:text-gray-400" />
  </Input>
</div>

Input element with addon #

Username      
Svelte
<script>
  import { Label, Input, InputAddon, ButtonGroup } from 'flowbite-svelte';
  import { Icon } from 'flowbite-svelte-icons';
</script>

<div class="mb-6">
  <Label for="website-admin" class="block mb-2">Username</Label>
  <ButtonGroup class="w-full">
    <InputAddon>
      <Icon name="user-circle-solid" class="w-4 h-4 text-gray-500 dark:text-gray-400" />
    </InputAddon>
    <Input id="website-admin" placeholder="elonmusk" />
  </ButtonGroup>
</div>

Form validation #

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

Your name

Well done! Some success message.

Your name

Not so well done! Some error message.

Svelte

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

<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 message.
  </Helper>
</div>
<div class="mb-6">
  <Label for='error' color='red' class='block mb-2'>Your name</Label>
  <Input id='error' color='red' placeholder="Error input" />
  <Helper class='mt-2' color='red'><span class="font-medium">Not so well done!</span> Some error message.</Helper>
</div>

Textarea #

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

 Select an option
  
Svelte
<script>
  import { Label, 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>

MultiSelect #

Svelte
<script>
  import { MultiSelect } from 'flowbite-svelte';

  let selected = [];
  let countries = [
    { value: 'us', name: 'United States' },
    { value: 'ca', name: 'Canada' },
    { value: 'fr', name: 'France' },
    { value: 'jp', name: 'Japan' },
    { value: 'en', name: 'England' }
  ];
</script>

<MultiSelect items={countries} bind:value={selected} />

Checkbox #

  Default checkbox     Checked state  
Svelte
<script>
  import { Checkbox } from 'flowbite-svelte';
</script>

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

Radio buttons #

  Default radio     Checked state  
Svelte
<script>
  import { Radio } from 'flowbite-svelte';
</script>

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

File upload #

 Upload file       
Svelte
<script>
  import { Label, Fileupload } from 'flowbite-svelte';

  let fileuploadprops = {
    id: 'user_avatar'
  };

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

<Label class="pb-2">Upload file</Label>
<Fileupload {...fileuploadprops} />

Toggle Switch #

   Toggle me       Checked toggle       Disabled toggle       Disabled checked   
Svelte
<script>
  import { Toggle } from 'flowbite-svelte';
</script>

<Toggle>Toggle me</Toggle>
<Toggle checked={true}>Checked toggle</Toggle>
<Toggle disabled>Disabled toggle</Toggle>
<Toggle checked disabled>Disabled checked</Toggle>

Component data #

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

To learn how to overwrite classes, please refer to the individual component pages.

Input #

Props

Name	Type	Default
type	InputType	'text'
value	any	undefined
size	FormSizeType \| undefined	undefined
defaultClass	string	'block w-full disabled:cursor-not-allowed disabled:opacity-50'
color	'base' \| 'green' \| 'red'	'base'
floatClass	string	'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400'

Events

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

Slots

Names
left
right

Label #

Props

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

Helper #

Props

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

Fileupload #

Props

Name	Type	Default
value	string	''
files	FileList \| undefined	undefined
inputClass	string	'border !p-0 dark:text-gray-400'

Events

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

Textarea #

Props

Name	Type	Default
value	any	undefined
wrappedClass	string	'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0'
unWrappedClass	string	'p-2.5 text-sm focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500'
innerWrappedClass	string	'py-2 px-4 bg-white dark:bg-gray-800'

Events

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

Slots

Names
header
footer

Select #

Props

Name	Type	Default
items	SelectOptionType[]	[]
value	any	undefined
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-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-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'

Events

Names
on:change
on:contextmenu
on:input

MultiSelect #

Props

Name	Type	Default
color	FormColorType	'primary'
custom	boolean	false
inline	boolean	false
group	(string \| number)[]	[]
value	string \| number	'on'
checked	boolean \| undefined	undefined
spacing	string	'mr-2'

Events

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

Checkbox #

Props

Name	Type	Default
spacing	string	'mr-2'
color	FormColorType	'primary'
custom	boolean	false
inline	boolean	false
group	number \| string	''
value	number \| string	''

Events

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

Radio #

Props

Name	Type	Default
size	'small' \| 'default' \| 'large' \| 'custom'	'default'
group	(string \| number)[]	[]
value	string \| number	''
checked	boolean \| undefined	undefined
customSize	string	''

Events

Names
on:click
on:change

Toggle #

Props

Name	Type	Default
items	SelectOptionType[]	[]
value	(string \| number)[]	[]
size	FormSizeType	'md'
dropdownClass	string	''

Events

Names
on:click
on:focusout
on:close
on:click
on:click
on:click

References #

Flowbite Forms

Footer

Gallery