Input Component

Field chrome

Input renders its own label (above the field), an optional right-aligned aside in the label row, and error / description rows below — all via the shared FieldChrome. See the full field-chrome page →

Plan name

Displayed on the pricing page and receipts.

<Input
  label="Plan name"
  description="Displayed on the pricing page and receipts."
  bind:value={name}
/>

Bio

0/40

A short tagline.

<Input label="Bio" bind:value={bio} maxlength={40} description="A short tagline.">
  {#snippet aside()}<span>{bio.length}/40</span>{/snippet}
</Input>

Slug

That slug is already taken.

Lowercase, hyphens only.

<Input
  label="Slug"
  required
  bind:value={slug}
  description="Lowercase, hyphens only."
  error={slugTaken ? 'That slug is already taken.' : null}
/>

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 '@spaethtech/svelte-ui';

let basicValue = $state('');

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

With Icons

import { Input } from '@spaethtech/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'}
/>