Input

Text input with floating label, clearable, prefix/suffix, icon slots, error and disabled states.

Import

ts 
import Input from '$lib/components/Input.svelte';

Usage

svelte 
<Input bind:value label="Email" placeholder="name@example.com" />

Types

Supports text, email, password, search, and number. The password type adds a show/hide toggle automatically.

svelte 
<Input bind:value label="Username" placeholder="username" clearable />
<Input bind:value label="Email" type="email" placeholder="name@example.com" clearable />
<Input bind:value label="Password" type="password" placeholder="••••••••" />
<Input bind:value type="search" placeholder="Search..." clearable />
<Input bind:value label="Amount" type="number" placeholder="0.00" />

Prefix & Suffix

Use prefix and suffix for inline text decorators like units or protocol strings.

https://
USD
svelte 
<Input bind:value label="Website" placeholder="site.com" prefix="https://" />
<Input bind:value label="Price" type="number" placeholder="0.00" suffix="USD" />

With Icons

Use the start and end snippet slots to place icons inside the field.

US
svelte 
<Input label="Username" placeholder="username">
  {#snippet start()}
    <svg class="size-4" .../>
  {/snippet}
</Input>

<Input label="Phone" type="tel" placeholder="+1 5__ ...">
  {#snippet start()}
    <svg class="size-4" .../>
  {/snippet}
  {#snippet end()}
    <span class="...">US</span>
  {/snippet}
</Input>

States

Pass error to show an inline error message. disabled prevents interaction.

Invalid email address.

svelte 
<!-- Error -->
<Input label="Email" type="email" value="wrong@" error="Invalid email address." />

<!-- Disabled -->
<Input label="Username" value="@ambarui" disabled />

Hint

The hint prop shows helper text below the field when there is no error.

Visible to everyone

Minimum 8 characters

svelte 
<Input bind:value label="Username" placeholder="username" hint="Visible to everyone" />
<Input bind:value label="Password" type="password" hint="Minimum 8 characters" />

Use Case — Sign-in Form

A realistic sign-in form combining icon slots, types, and a submit button.

Sign in

Welcome back

svelte 
<form onsubmit={handleSubmit} class="space-y-4">
  <Input bind:value={email} label="Email" type="email" placeholder="name@example.com" clearable>
    {#snippet start()}
      <svg class="size-4" .../>
    {/snippet}
  </Input>

  <Input bind:value={pass} label="Password" type="password" placeholder="••••••••">
    {#snippet start()}
      <svg class="size-4" .../>
    {/snippet}
  </Input>

  <Button type="submit" fullWidth>Sign in</Button>
</form>

API Reference

PropTypeDefaultDescription
value string''Bindable input value.
type 'text' | 'email' | 'password' | 'search' | 'url' | 'tel' | 'number''text'HTML input type.
label string—Floating label text shown above the field.
placeholder string''Placeholder text when the field is empty.
hint string—Helper text shown below the input.
error string—Error message. When set, the field turns red.
disabled booleanfalsePrevents interaction and dims the field.
clearable booleanfalseShows an X button to clear the value.
prefix string—Text displayed inside the field before the value (e.g. "https://").
suffix string—Text displayed inside the field after the value (e.g. "USD").
start Snippet—Snippet rendered at the left side of the input (icon slot).
end Snippet—Snippet rendered at the right side of the input (icon slot).
onvalue (v: string) => void—Called whenever the value changes.