Input field

Setup

<script lang="ts">
  import { Input } from 'svelte-5-ui-lib';
  let { text = $bindable("") } = $props();
</script>

Interactive Input Builder

<Input/>

Click handler

<script lang="ts">
  import { EyeOutline, EyeSlashOutline } from "flowbite-svelte-icons";
  import { Input, Label, InputAddon, ButtonGroup } from 'svelte-5-ui-lib';
  let show = $state(false);
  let show1 = $state(false);
</script>

<form class="mb-4">
  <Label for="show-password" class="mb-2">Your password</Label>
  <Input id="show-password" name="show-password" autocomplete="new-password" type={show ? "text" : "password"} placeholder="Your password here" size="lg" class="pl-10">
    {#snippet left()}
      <button onclick={() => (show = !show)} class="pointer-events-auto">
        {#if show}
          <EyeOutline class="h-6 w-6" />
        {:else}
          <EyeSlashOutline class="h-6 w-6" />
        {/if}
      </button>
    {/snippet}
  </Input>
</form>

<form>
  <Label for="show-password1" class="mb-2">Your password</Label>
  <ButtonGroup class="w-full">
    <InputAddon>
      <button onclick={() => (show1 = !show1)}>
        {#if show1}
          <EyeOutline class="h-6 w-6" />
        {:else}
          <EyeSlashOutline class="h-6 w-6" />
        {/if}
      </button>
    </InputAddon>
    <Input id="show-password1" type={show1 ? "text" : "password"} name="show-password1" autocomplete="new-password" placeholder="Your password here" />
    <Input id="usename" name="usename" type="text" class="hidden" />
  </ButtonGroup>
</form>

Dropdown

<script lang="ts">
  import { Button, ButtonGroup, Dropdown, DropdownLi, DropdownUl, Input, uiHelpers } from 'svelte-5-ui-lib';
  import { sineIn } from "svelte/easing";
  import { ChevronDownOutline, SearchOutline } from "flowbite-svelte-icons";

  let dropdown = uiHelpers();
  let dropdownStatus = $state(false);
  let closeDropdown = dropdown.close;
  let transitionParams = {
    y: 0,
    duration: 200,
    easing: sineIn
  };
  $effect(() => {
    // this can be done adding nav.navStatus directly to DOM element
    // without using effect
    dropdownStatus = dropdown.isOpen;
  });
</script>

<div class="h-48">
  <ButtonGroup class="w-full">
    <Button onclick={dropdown.toggle} class="flex-shrink-0 border border-gray-300 bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-300 dark:border-gray-700 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-800">
      All categories<ChevronDownOutline class="ms-2 h-6 w-6" />
    </Button>
    <div class="relative">
      <Dropdown {dropdownStatus} {closeDropdown} params={transitionParams} class="absolute -left-[160px] top-[40px]">
        <DropdownUl>
          <DropdownLi href="/">Shopping</DropdownLi>
          <DropdownLi href="/">Images</DropdownLi>
          <DropdownLi href="/">News</DropdownLi>
          <DropdownLi href="/">Finance</DropdownLi>
        </DropdownUl>
      </Dropdown>
    </div>
    <Input placeholder="Search" />
    <Button color="primary" class="!p-2.5" type="submit">
      <SearchOutline class="h-5 w-5" />
    </Button>
  </ButtonGroup>
</div>

Form

<script lang="ts">
  import { Input, Label, Checkbox, Button, A } from 'svelte-5-ui-lib';
</script>

<form>
  <div class="mb-6 grid gap-6 md:grid-cols-2">
    <div>
      <Label for="first_name" class="mb-2">First name</Label>
      <Input type="text" id="first_name" placeholder="John" required />
    </div>
    <div>
      <Label for="last_name" class="mb-2">Last name</Label>
      <Input type="text" id="last_name" placeholder="Doe" required />
    </div>
    <div>
      <Label for="company" class="mb-2">Company</Label>
      <Input type="text" id="company" placeholder="Flowbite" required />
    </div>
    <div>
      <Label for="phone" class="mb-2">Phone number</Label>
      <Input type="tel" id="phone" placeholder="123-45-678" pattern={"[0-9]{3}-[0-9]{2}-[0-9]{3}"} required />
    </div>
    <div>
      <Label for="website" class="mb-2">Website URL</Label>
      <Input type="url" id="website" placeholder="flowbite.com" required />
    </div>
    <div>
      <Label for="visitors" class="mb-2">Unique visitors (per month)</Label>
      <Input type="number" id="visitors" placeholder="" required />
    </div>
  </div>
  <div class="mb-6">
    <Label for="email" class="mb-2">Email address</Label>
    <Input type="email" id="email" autocomplete="email" placeholder="john.doe@company.com" required />
  </div>
  <div class="mb-6">
    <Label for="password" class="mb-2">Password</Label>
    <Input type="password" name="password" autocomplete="new-password" id="password" placeholder="•••••••••" required />
  </div>
  <div class="mb-6">
    <Label for="confirm_password" class="mb-2">Confirm password</Label>
    <Input type="password" id="confirm_password" name="confirm_password" autocomplete="new-password" placeholder="•••••••••" required />
  </div>
  <Checkbox classLabel="mb-6 space-x-1 rtl:space-x-reverse" required>
    I agree with the <A href="/" class="text-primary-700 hover:underline dark:text-primary-600">terms and conditions</A>.
  </Checkbox>
  <Button type="submit">Submit</Button>
</form>

Group

Small additional text

Default additional text

.com

Large additional text

.com

Grouped with button

Crazy example

http://

<script lang="ts">
  import { ButtonGroup, Input, InputAddon, Label, Button, Checkbox } from 'svelte-5-ui-lib';
</script>

<div>
  <Label class="mb-2" for="input-addon-sm">Small additional text</Label>
  <ButtonGroup class="w-full" size="sm">
    <InputAddon>@</InputAddon>
    <Input id="input-addon-sm" type="email" placeholder="Your name" />
  </ButtonGroup>
</div>

<div>
  <Label class="mb-2" for="input-addon-md">Default additional text</Label>
  <ButtonGroup class="w-full" size="md">
    <Input id="input-addon-md" type="email" placeholder="Your name" />
    <InputAddon>.com</InputAddon>
  </ButtonGroup>
</div>

<div>
  <Label class="mb-2" for="input-addon-lg">Large additional text</Label>
  <ButtonGroup class="w-full" size="lg">
    <InputAddon>@</InputAddon>
    <Input id="input-addon-lg" type="email" placeholder="Your name" />
    <InputAddon>.com</InputAddon>
  </ButtonGroup>
</div>

<div class="pt-8">
  <Label for="input-addon" class="mb-2">Grouped with button</Label>
  <ButtonGroup class="w-full">
    <InputAddon>@</InputAddon>
    <Input id="input-addon" type="email" placeholder="Your name" />
    <Button color="primary">Search</Button>
  </ButtonGroup>
</div>

<div>
  <Label for="input-addon" class="mb-2">Crazy example</Label>
  <ButtonGroup class="w-full">
    <InputAddon><Checkbox /></InputAddon>
    <Button color="primary">Search</Button>
    <InputAddon>http://</InputAddon>
    <Input id="input-addon" type="email" placeholder="Your name" />
    <InputAddon><Checkbox /></InputAddon>
    <Button color="blue">Send</Button>
  </ButtonGroup>
</div>

Icon

Small input - left icon

Default input - right icon

Large input - both icons

<script lang="ts">
  import { Input, Label, CloseButton } from 'svelte-5-ui-lib';
  import { EnvelopeSolid } from "flowbite-svelte-icons";
</script>

<Label class="mb-4 space-y-2">
  <span>Small input - left icon</span>
  <Input type="email" placeholder="name@flowbite.com" size="sm" class="pl-8">
    {#snippet left()}
      <EnvelopeSolid class="h-4 w-4" />
    {/snippet}
  </Input>
</Label>

<Label class="mb-4 space-y-2">
  <span>Default input - right icon</span>
  <Input type="email" placeholder="name@flowbite.com" size="md">
    {#snippet right()}
      <EnvelopeSolid class="h-5 w-5" />
    {/snippet}
  </Input>
</Label>

<Label class="space-y-2">
  <span>Large input - both icons</span>
  <Input type="email" placeholder="name@flowbite.com" size="lg" class="pl-10">
    {#snippet left()}
      <EnvelopeSolid class="h-6 w-6" />
    {/snippet}
    {#snippet right()}
      <CloseButton />
    {/snippet}
  </Input>
</Label>

Number

Your lucky number

Value: 5

Type of value: number

<script lang="ts">
  import { Input, Label } from 'svelte-5-ui-lib';
  let value = $state(5);
</script>

<Label class="mb-4 space-y-2">
  <span>Your lucky number</span>
  <Input type="number" bind:value />
</Label>

<p>Value: {value}</p>
<p>Type of value: {typeof value}</p>

Search

<script lang="ts">
  import { Input, Label, Button } from 'svelte-5-ui-lib';
  import { SearchOutline } from "flowbite-svelte-icons";
</script>

<form>
  <Label for="search" class="mb-2 block">Your Email</Label>
  <Input id="search" placeholder="Search" size="lg" class="pl-10">
    {#snippet left()}
      <SearchOutline class="h-6 w-6 text-gray-500 dark:text-gray-400" />
    {/snippet}
    {#snippet right()}
      <Button size="sm" type="submit">Search</Button>
    {/snippet}
  </Input>
</form>

Clearable

<script lang="ts">
  import { Input } from 'svelte-5-ui-lib';
</script>

<Input clearable placeholder="Clearable input" />

Advanced usage

Your lucky number:

<script lang="ts">
  import { Input, Helper } from 'svelte-5-ui-lib';
  let value = $state();
</script>

<Input placeholder="Your lucky number">
  {#snippet children(prop)}
    <input type="number" bind:value {...prop} />
  {/snippet}
</Input>
<Helper class="mt-2">Your lucky number: {value}</Helper>