# Textarea

Multi-line text input wrapping native <textarea>. Shares variants with input.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils, input
- Shared utilities: components/_internal/field-metadata, utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add textarea
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Textarea

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| placeholder | string \| undefined | - | No | No | Text shown while there is no value. |
| label | string \| undefined | - | No | No | Visible label linked to the control. |
| description | string \| undefined | - | No | No | Supporting text under the label, announced with the control. |
| variant | "outline" \| "secondary" \| undefined | 'outline' | No | No | `outline` has a border. `secondary` has a filled background. |
| autoresize | boolean \| undefined | false | No | No | Grows with its content instead of scrolling. |
| class | (string & (ClassValue \| null)) \| undefined | - | No | No | Classes added to the element. |
| children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. |
| element | HTMLTextAreaElement \| undefined | - | No | Yes | Bindable reference to the DOM element. |
| value | ((string \| number) & (string \| number \| string[])) \| null \| undefined | - | No | Yes | Field value. Bindable. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { Snippet } from 'svelte';
import type { HTMLTextareaAttributes } from 'svelte/elements';
import Textarea from './textarea.svelte';

export type TextareaProps = {
    /** Text shown while there is no value. */
    placeholder?: string;
    /** Visible label linked to the control. */
    label?: string;
    /** Supporting text under the label, announced with the control. */
    description?: string;
    /** `outline` has a border. `secondary` has a filled background. */
    variant?: 'outline' | 'secondary';
    /** Grows with its content instead of scrolling. */
    autoresize?: boolean;
    /** Classes added to the element. */
    class?: string;
    /** Content rendered inside. */
    children?: Snippet;
    /** Bindable reference to the DOM element. */
    element?: HTMLTextAreaElement | undefined;
    /** Field value. Bindable. */
    value?: string | number | null | undefined;
} & HTMLTextareaAttributes;

export { Textarea };
export default Textarea;
~~~~

## Examples

### Basic

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

<div class="w-full max-w-sm">
    <Textarea label="Message" placeholder="Enter your message…" />
</div>
~~~~

### Composer

~~~~svelte
<script lang="ts">
    import { numberShuffle } from '@mielui/svelte/actions/number-shuffle';
    import { Button } from '@mielui/svelte/components/button';
    import { Textarea } from '@mielui/svelte/components/textarea';

    let message = $state('');
    let sent = $state('');

    function send(event: SubmitEvent) {
        event.preventDefault();
        sent = message.trim();
        message = '';
    }
</script>

<form class="flex w-full max-w-sm flex-col gap-3" onsubmit={send}>
    <Textarea
        bind:value={message}
        label="Message"
        autoresize
        required
        placeholder="Write a message…"
    >
        <div class="flex items-center justify-between gap-3 px-3 pb-3">
            <span class="text-xs text-foreground-muted tabular-nums">
                <span use:numberShuffle={{ value: message.length }}>
                    {message.length}
                </span>
                characters
            </span>
            <Button type="submit" size="sm" disabled={!message.trim()}>Send</Button>
        </div>
    </Textarea>
    <p role="status" class="text-sm text-foreground-muted">
        {sent ? `Sent in this preview: ${sent}` : ''}
    </p>
</form>
~~~~

### Disabled

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

<div class="w-full max-w-sm">
    <Textarea disabled value="Cannot edit this text" label="Disabled" />
</div>
~~~~

### Labeled

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

<div class="w-full max-w-sm">
    <Textarea label="Feedback" description="Tell us what you think." />
</div>
~~~~

For the rendered reference, visit [/docs/components/textarea](/docs/components/textarea).