mielui
Native controls

Input

A text field with optional labels, helper text, and decorative adornments. Comes in two variants.

Installation

pnpm dlx @mielui/svelte add input

Usage

Bind value to the field value. label is the visible name and description the helper text under the field; both are linked to the input. Native attributes such as type, name, required, and autocomplete pass through to the input, and bind:element gives you the input element.

For a file input, bind files rather than value. Native checkbox and radio inputs bind checked; radios with the same name in the same form stay in sync. Use Checkbox and RadioGroup for styled selection controls.

<script lang="ts">
    import { Input } from '@mielui/svelte/components/input';

    let email = $state('');
</script>

<Input bind:value={email} label="Email" type="email" placeholder="you@example.com" />

Examples

In a form

Two fields with descriptions, saved together by one button.

Adornments

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

Variants

outline, the default, draws a hairline on the field color. secondary uses a filled background.

Validation

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

API reference

Input

Accepts a single-line value.

  • placeholder
    string

    Text shown while there is no value.

  • label
    string

    Visible label linked to the control.

  • description
    string

    Supporting text under the label, announced with the control.

  • variant
    "outline" | "secondary"

    outline has a border. secondary has a filled background.

    Default 'outline'

  • class
    (string & (ClassValue | null))

    Classes added to the element.

  • leading
    Snippet<[]>

    Decorative content inside the field, before the text.

  • trailing
    Snippet<[]>

    Decorative content inside the field, after the text.

  • element Bindable
    HTMLInputElement

    Bindable reference to the DOM element.

  • type
    "file" | "checkbox" | "radio" | "button" | "color" | "date" | "datetime-local" | "email" | "hidden" | "image" | "month" | "number" | "password" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week"

    Native input type.

    Default 'text'

  • files Bindable
    FileList

    Selected files for a file input. Bindable.

  • value Bindable
    string | number

    Field value. Bindable.

  • checked Bindable
    boolean

    Checked state for the checkbox and radio types. Bindable.