Svelte Forms - Flowbite

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

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

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

<script>
  import { Label, Input, ButtonGroup } from 'flowbite-svelte';
  import { EnvelopeSolid } 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">
    <EnvelopeSolid slot="left" class="w-5 h-5 text-gray-500 dark:text-gray-400" />
  </Input>
</div>

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

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

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

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

<Textarea {...textareaprops} />

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

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

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

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

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

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

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

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