Back to Components
Theme:
Auto (System)
Light
Dark
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'} />
With Validation
Types