Theme:

Input Component

Basic

import { Input } from 'svelte-ui';

let basicValue = $state('');

<Input bind:value={basicValue} placeholder="Enter some text..." />

With Icons

import { Input } from 'svelte-ui';
import Magnify from '~icons/mdi/magnify';
import Eye from '~icons/mdi/eye';
import EyeOff from '~icons/mdi/eye-off';

let value = $state('');
let showPassword = $state(false);

<!-- Icon is a snippet — pass any icon component -->
{#snippet search()}<Magnify />{/snippet}
<Input bind:value placeholder="Search..." icon={search} />

<!-- A snippet can branch on state (clickable show/hide) -->
{#snippet eye()}{#if showPassword}<EyeOff />{:else}<Eye />{/if}{/snippet}
<Input
  bind:value
  icon={eye}
  iconClickable={true}
  onIconClick={() => showPassword = !showPassword}
  type={showPassword ? 'text' : 'password'}
/>

Input Component

Basic

With Icons

With Validation

Types