We'll never share your email

<script lang="ts">
  import { Input } from "kumo-svelte/components/input";
</script>

<Input label="Email" placeholder="you@example.com" description="We'll never share your email" />

Import

import { Input } from "kumo-svelte/components/input";

Usage

With Built-in Field (Recommended)

Use the label prop to enable the built-in Field wrapper with label, description, and error support.

<script lang="ts">
  import { Input } from "kumo-svelte/components/input";
</script>

<Input
  label="Email"
  placeholder="you@example.com"
  description="We'll never share your email"
/>

Bare Input (Custom Layouts)

For custom form layouts, use Input without label. Provide aria-label or aria-labelledby for accessibility.

<Input placeholder="Search..." aria-label="Search products" />

Examples

With Label and Description

The label prop enables the built-in Field wrapper with automatic vertical layout.

Username

3-20 characters, alphanumeric only

<script lang="ts">
  import { Input } from "kumo-svelte/components/input";
</script>

<Input label="Username" placeholder="Choose a username" description="3-20 characters, alphanumeric only" />

With Error (String)

Pass error as a string for simple error messages. Error styling is automatically applied when the error prop is truthy.

Please enter a valid email address

<script lang="ts">
  import { Input } from "kumo-svelte/components/input";
</script>

<Input label="Email" placeholder="you@example.com" value="invalid-email" error="Please enter a valid email address" />

With Error (Validation Object)

Pass error to show validation copy and the error visual state. The component API also supports validity-matched error objects.

Password

Password must be at least 8 characters

<script lang="ts">
  import { Input } from "kumo-svelte/components/input";
</script>

<Input
  label="Password"
  type="password"
  value="short"
  error="Password must be at least 8 characters"
  minlength={8}
/>

Input Sizes

Four sizes available: xs, sm, base (default), and lg.

Extra Small

Small

Base

Large

<script lang="ts">
  import { Input } from "kumo-svelte/components/input";
</script>

<div class="flex flex-col gap-4">
  <Input size="xs" label="Extra Small" placeholder="Extra small input" />
  <Input size="sm" label="Small" placeholder="Small input" />
  <Input label="Base" placeholder="Base input (default)" />
  <Input size="lg" label="Large" placeholder="Large input" />
</div>

Disabled

Disabled field

<script lang="ts">
  import { Input } from "kumo-svelte/components/input";
</script>

<Input label="Disabled field" placeholder="Cannot edit" disabled />

Optional Field

Set required={false} to show optional text after the label.

Phone Number (optional)

<script lang="ts">
  import { Input } from "kumo-svelte/components/input";
</script>

<Input label="Phone Number" required={false} placeholder="+1 (555) 000-0000" />

Use labelTooltip to add an info icon with additional context on hover.

API Key

<script lang="ts">
  import { Input } from "kumo-svelte/components/input";
</script>

{#snippet labelTooltip()}
  Find this in your dashboard under Settings &gt; API Keys
{/snippet}

<Input label="API Key" {labelTooltip} placeholder="sk_live_..." />

Snippet Label

The label prop accepts a string or snippet for rich formatting.

Email for billing

<script lang="ts">
  import { Input } from "kumo-svelte/components/input";
</script>

{#snippet label()}
  <span>Email for <strong>billing</strong></span>
{/snippet}

<Input label={label} required placeholder="billing@company.com" type="email" />

Controlled with oninput

Use the standard Svelte oninput handler when you need the native input event.

With oninput

Uses event.currentTarget.value

<script lang="ts">
  import { Input } from "kumo-svelte/components/input";
  let value = $state("");
</script>

<Input
  label="With oninput"
  placeholder="Type something..."
  description={value ? `Value: ${value}` : "Uses event.currentTarget.value"}
  {value}
  oninput={(event) => {
    value = event.currentTarget.value;
  }}
/>

Controlled with bind:value

Use bind:value for idiomatic Svelte two-way state.

With bind:value

Uses Svelte two-way binding

<script lang="ts">
  import { Input } from "kumo-svelte/components/input";
  let value = $state("");
</script>

<Input
  label="With bind:value"
  placeholder="Type something..."
  description={value ? `Value: ${value}` : "Uses Svelte two-way binding"}
  bind:value
/>

Bare Input (No Label)

Input without label renders as a bare input. Provide aria-label for accessibility.

<script lang="ts">
  import { Input } from "kumo-svelte/components/input";
</script>

<Input placeholder="Search..." aria-label="Search products" />

Error Without Label

Error messages and descriptions render even without a visible label; use aria-label to keep the input accessible.

Please enter a valid hostname

Path must start with /

<script lang="ts">
  import { Input } from "kumo-svelte/components/input";
</script>

<div class="flex flex-col gap-4">
  <Input aria-label="Hostname" placeholder="example.com" value="not a host" error="Please enter a valid hostname" />
  <Input aria-label="Path" placeholder="/api/v1/users" value="missing-slash" error="Path must start with /" />
</div>

Input Types

Supports standard HTML input types: text, email, password, number, tel, url, and more.