Input Component

Variants

borderless

The shared variant axis tints the field's border with one calculation for every variant (no secondary special case): the variant token at --ui-tint-border (50%) at rest, --ui-tint-border-hover (80%) on hover/focus. borderless drops the visible frame (border → transparent) while keeping the box + focus outline.

<Input variant="neutral" />
<Input variant="primary" />
<Input variant="secondary" />
<Input variant="success" />
<Input variant="info" />
<Input variant="warning" />
<Input variant="danger" />
<Input variant="ghost" />

Sizes

<Input size="sm" />
<Input size="md" />
<Input size="lg" />

Basic

import { Input } from 'svelte-ui';

let basicValue = $state('');

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

With Icons

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

let searchValue = $state('');
let emailValue = $state('test@example.com');
let usernameValue = $state('');
let passwordValue = $state('');
let showPassword = $state(false);

<!-- Icon is a snippet — pass any icon component -->
{#snippet search()}<Magnify />{/snippet}
{#snippet email()}<Email />{/snippet}
{#snippet user()}<Account />{/snippet}
<!-- A snippet can branch on state (clickable show/hide) -->
{#snippet eye()}{#if showPassword}<EyeOff />{:else}<Eye />{/if}{/snippet}

<Input bind:value={searchValue} placeholder="Search..." icon={search} />
<Input bind:value={emailValue} placeholder="Email address" icon={email} type="email" />
<Input bind:value={usernameValue} placeholder="Username" icon={user} autocomplete="off" />
<Input
  bind:value={passwordValue}
  placeholder="Password"
  icon={eye}
  iconClickable={true}
  onIconClick={() => showPassword = !showPassword}
  type={showPassword ? 'text' : 'password'}
/>

Input Component

Variants

Sizes

Basic

With Icons

With Validation

Types