Studio
2

Input

Installation

pnpm dlx @mielui/svelte add input

Usage

Bind value to the field value. Use label for its visible name, description for helper text, and native attributes such as type, name, required, and autocomplete for form behavior.

Input preserves native checkbox and radio submission values and checked state. Bind files for file inputs; do not bind a file input's value. Text and numeric input values are strings or numbers. Use Checkbox and RadioGroup for styled selection controls and shared radio selection state.

For native radios, bind checked separately on each input. Radios with the same name and form owner synchronize their bound values when selection changes; form resets synchronize them to the browser's default state. Radios in other forms remain independent. Use RadioGroup when you want one shared selection value.

Labels point to the native control, and descriptions are linked with aria-describedby. External aria-describedby IDs are preserved and deduplicated alongside the built-in description. Conditional descriptions are linked only while rendered, with stable metadata IDs across changes to the control id.

import { Input } from '$lib/mielui/components/input';

<Input label="Email" placeholder="you@example.com" />

Examples

Adornments

Use non-interactive leading and trailing snippets with text-entry inputs for icons, units, or short context.

Outline

Secondary

Validation

Use native constraints with error messages that respond to blur and form submission.

API reference

Input

Accepts a single-line value.

Prop Type Default
placeholder string | undefined —
label string | undefined —
description string | undefined —
variant "secondary" | "outline" | undefined 'outline'
class (string & (ClassValue | null)) | undefined —
leading Snippet<[]> | undefined —
trailing Snippet<[]> | undefined —
element Bindable HTMLInputElement | undefined —
type "file" | "checkbox" | "radio" | "number" | "hidden" | "color" | "search" | "button" | "text" | "tel" | "url" | "email" | "date" | "time" | "submit" | "reset" | "image" | "datetime-local" | "month" | "password" | "range" | "week" | undefined 'text'
files Bindable FileList | undefined | undefined —
value Bindable undefined | string | number | undefined —
checked Bindable undefined | boolean | undefined —