Input

Installation

Barrel

import { Input, Textarea } from 'kumo-svelte';

Granular

import { Input, Textarea } 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';</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. Must provide aria-label or aria-labelledby for accessibility.

<script lang="ts">  import { Input } from 'kumo-svelte';</script><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 (label above input).

With Error (String)

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

With Error (Validation Object)

Pass error as an object with message and match for HTML5 validation. Error shows when field validity matches.

Input Sizes

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

Disabled

Optional Field

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

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

Snippet Label

The label prop accepts a Svelte snippet for rich formatting.

Controlled with oninput

The standard Svelte oninput handler receives the full event object. Use event.currentTarget.value to get the value.

Controlled with onValueChange

onValueChange is a convenience handler that gives you the string value directly without event unwrapping.

Bare Input (No Label)

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

Error Without Label

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

Input Types

Supports all HTML input types: text, email, password, number, tel, url, etc.

Password Manager Overlays

Set passwordManagerIgnore on non-credential inputs that password managers might incorrectly classify as login fields.

API Reference

Input accepts all standard HTML input attributes plus the following:

Prop	Type	Default	Description
label	`string \| Snippet`	-	Visible label content.
labelTooltip	`string \| Snippet`	-	Optional help content for the label.
description	`string \| Snippet`	-	Supporting description text.
error	`FieldError`	-	Validation error message or matcher.
size	`'xs' \| 'sm' \| 'base' \| 'lg'`	`"base"`	Size preset.
variant	`'default' \| 'error'`	`"default"`	Visual variant.
class	`string`	-	Additional classes merged onto the root element.
passwordManagerIgnore	`boolean`	`false`	Adds password-manager ignore attributes.
required	`boolean`	-	Marks the field as required.

Validation Error Types

When using error as an object, the match property corresponds to HTML5 ValidityState values:

Match	Description
valueMissing	Required field is empty
typeMismatch	Value doesn't match type (e.g., invalid email)
patternMismatch	Value doesn't match pattern attribute
tooShort	Value shorter than minLength
tooLong	Value longer than maxLength
rangeUnderflow	Value less than min
rangeOverflow	Value greater than max
true	Always show error (for server-side validation)

Accessibility

Label Requirement

Inputs require an accessible name via one of:

`label` prop (recommended)
`placeholder` + `aria-label` for bare inputs
`aria-labelledby` for custom label association

Error Association

Error messages are automatically associated with the input via ARIA attributes for screen reader announcement.

Kumo Svelte