Forms

Textarea

Multi-line text input with label, description, and error wiring plus an optional live character counter against maxlength.

import { Textarea } from '@lostgradient/cinder/textarea';
formfield
01

Overview

Multi-line text input for longer freeform content with optional resize control.

Usage

svelte 
<script lang="ts">
  import Textarea from '@lostgradient/cinder/textarea';
</script>

<Textarea />
Live preview
02

When to use

Use when
  • Collecting multi-line prose such as comments, descriptions, or messages.
  • Surfacing a remaining-character counter as the user types against a maxlength.
Avoid when
  • Collecting a single short line of text — use input instead.
03

Examples

Basic textarea

Multi-line text input with label and bound value.

Disabled textarea

A disabled textarea is dimmed and non-editable; its value is still shown so context is preserved while editing is locked.

Required textarea

Setting `required` forwards the native `required` attribute, which browsers expose as `aria-required="true"` and enforce during form submission.

Live character counter

Set `countVisible` together with `maxlength` to render a live `{used}/{limit}` counter below the field that updates as the user types.

Textarea with error

Validation error wired via aria-invalid and aria-describedby.

04

Props

Props for textarea
Name Type Default Required Bindable Description
id text req Unique identifier — required for label association and ARIA wiring.
value text '' bind Bound value of the textarea.
label text Visible label rendered in a <label> element associated via for.
description text Helper text displayed below the textarea; wired via aria-describedby.
error text Validation error message; sets aria-invalid="true" and aria-describedby.
rows number 4 Number of visible text rows. Defaults to 4.
disabled boolean Disables the textarea.
required boolean Marks the field as required. Passed through to the native required attribute.
maxlength number Maximum character count. Passed through to the native maxlength attribute and shown as the limit in the countVisible counter.
countVisible boolean false When true AND maxlength is set, renders a live character counter ({value.length}/{maxlength}) below the textarea. The counter element is wired into aria-describedby so screen readers announce it as part of the field's description, and it is also placed inside an aria-live="polite" region so updates are announced as the user types.