Forms

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

<div class="mb-6">
  <Label for="large-input" class="mb-2 block">Large input</Label>
  <Input id="large-input" size="lg" placeholder="Large input" />
</div>
<div class="mb-6">
  <Label for="default-input" class="mb-2 block">Default input</Label>
  <Input id="default-input" placeholder="Default input" />
</div>
<div class="mb-6">
  <Label for="small-input" class="mb-2 block">Small input</Label>
  <Input id="small-input" size="sm" placeholder="Small input" />
</div>

	<script>
  import { 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="mb-2 block">Your email</Label>
<Input id="email" name="email" required placeholder="name@flowbite.com" />
<Helper class="mt-2 text-sm">
  We’ll never share your details. Read our <a href="/" class="text-primary-600 dark:text-primary-500 font-medium hover:underline">Privacy Policy</a>
  .
</Helper>

	<script>
  import { Label, Input } from "flowbite-svelte";
  import { EnvelopeSolid } from "flowbite-svelte-icons";
</script>

<div class="mb-6">
  <Label for="input-group-1" class="mb-2 block">Your Email</Label>
  <Input id="email" type="email" placeholder="name@flowbite.com" class="pl-8">
    {#snippet left()}
      <EnvelopeSolid class="h-5 w-5 text-gray-500 dark:text-gray-400" />
    {/snippet}
  </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="mb-2 block">Username</Label>
  <ButtonGroup class="w-full">
    <InputAddon>
      <UserCircleSolid class="h-4 w-4 text-gray-500 dark:text-gray-400" />
    </InputAddon>
    <Input id="website-admin" placeholder="johndoe" />
  </ButtonGroup>
</div>

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

<div class="mb-6">
  <Label for="success" color="green" class="mb-2 block">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="mb-2 block">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} class="w-full" />

	<script lang="ts">
  import { Label, Select } from "flowbite-svelte";
  let selected: string = "";

  let countries: { value: string; name: string }[] = [
    { 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 lang="ts">
  import { MultiSelect } from "flowbite-svelte";

  let multiSelected: string[] = [];
  let countries: { value: string; name: string }[] = [
    { 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={multiSelected} />

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