mielui
Native controls

Textarea

A multi-line text input that shares the Input styling.

Installation

pnpm dlx @mielui/svelte add textarea

Usage

Bind value to read or set the text. label and description are linked to the native textarea, and every other textarea attribute passes through. Set autoresize to grow the field with its content instead of scrolling. Bind element to reach the textarea, for example to focus it.

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

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

<Textarea bind:value={message} label="Message" autoresize />

Examples

Basic

With label and description

Disabled

Composer

Content passed as children renders below the text inside the same field border, here a character count and a send button. autoresize grows the field as you type.

API reference

Textarea

Accepts a multi-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'

  • autoresize
    boolean

    Grows with its content instead of scrolling.

    Default false

  • class
    (string & (ClassValue | null))

    Classes added to the element.

  • children
    Snippet<[]>

    Content rendered inside.

  • element Bindable
    HTMLTextAreaElement

    Bindable reference to the DOM element.

  • value Bindable
    ((string | number) & (string | number | string[])) | null

    Field value. Bindable.