Sivir UI
79

Textarea

Wraps a native textarea. It can grow with its content, and it can hold a toolbar inside its border for message composers.

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

    let value = $state(
        'The export finished, but three rows were skipped because their dates were empty. Can you check the source file?'
    );
</script>

<div class="w-full max-w-sm">
    <Textarea bind:value label="Message" />
</div>

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add textarea

Usage

Bind value to read the text. Add autoresize to grow the field with its content instead of showing a resize handle. Children render below the text inside the same border, which fits a send button or toolbar.

import { Textarea } from '@sivir-ui/svelte/components/textarea';

let message = $state('');

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

Examples

Basic

0 / 500 characters
<script lang="ts">
    import { Textarea } from '@sivir-ui/svelte/components/textarea';

    let value = $state('');

    const tooLong = $derived(value.length > 500);
</script>

<div class="w-full max-w-sm flex flex-col gap-2">
    <Textarea
        bind:value
        aria-invalid={tooLong || undefined}
        aria-describedby="feedback-count"
        placeholder="Share your feedback…"
    />
    <span id="feedback-count" class={['text-xs', tooLong ? 'text-error' : 'text-foreground-muted']}>
        {tooLong ? 'Keep it under 500 characters.' : `${value.length} / 500 characters`}
    </span>
</div>

With label and description

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

<div class="w-full max-w-sm">
    <Textarea label="Feedback" description="Only the design team can see this." />
</div>

Disabled

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

<div class="w-full max-w-sm">
    <Textarea disabled value="Locked after the release was published." label="Release notes" />
</div>

Anatomy

Textarea - Accepts a multi-line value.