Pricing

Textarea

Figma Source code

Enter multi-line descriptions, notes, or longer content with native form attributes and field feedback.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Textarea for multiple lines of text; use Input for one line. Compose it with Field for a label, help, and error. Do not use a read-only input as a layout substitute for ordinary display text.

  • bind:value synchronizes text. defaultValue is only a fallback when value is undefined. Restore the bound value on form reset.

  • resize controls allowed directions. readonly, disabled, or resize="none" removes the resize handle. name participates in form submission.

Import

import { Textarea } from '@snowui-design-system/components';

Usage

Draft

Feedback form

Character count

Input limit

Readonly

Disabled

Resize

Long content

Address

Loading

Events

API Reference

Property Type Default Example Description
value string — bind:value={draft} Current text; supports bind:value. An explicit value takes priority over defaultValue. On input and change, the binding is synchronized before the corresponding callback runs.
defaultValue string — defaultValue="SnowUI release notes" Fallback text while value is undefined; value takes over after the first edit. This is not an independent native reset protocol. Controlled forms should restore the bound initial value in onreset.
placeholder string — placeholder="Share feedback on the docs…" Multiline hint for an empty value; may include line breaks. It does not replace an accessible label.
maxCount number — maxCount={100} Suggested character limit used only by the counter and exceeded; it does not block input. Counts JavaScript string.length (UTF-16 code units). The counter appears on component hover instead of using an 80% threshold, and stays red and visible only when strictly over the limit. Use a positive integer. Set maxlength separately for a hard input limit.
exceeded boolean false bind:exceeded={exceeded} Calculated automatically from whether current text length is strictly greater than maxCount. Supports bind:exceeded for reading the result. False when maxCount is absent; a supplied value is overwritten by the calculation. Does not automatically set invalid.
name string — name="feedback" Native form field name for submission. Disabled fields are excluded from FormData.
disabled boolean false disabled Disable editing, native form submission, and Tab focus, and remove the resize handle while keeping content visible.
readonly boolean false readonly Preserve focus, selection, copy, and named form submission while preventing edits. Removes the resize handle, ignores rows, and uses a read-only content layout.
required boolean false required Enable native required validation. The caller or Field supplies custom feedback copy.
rows number 2 rows={6} Suggested visible row count passed to the native textarea; use a positive integer. Not passed when readonly. The component also measures content height on mount, input, and external value changes, so rows does not lock the final height.
cols number — cols={32} Suggested character column count passed to the native textarea; use a positive integer. The component fills container width by default, so cols does not directly set shell width. With wrap="hard", it can affect submitted line breaks.
minlength number — minlength={20} Native minimum text length in UTF-16 code units. Does not block input. Use required separately for empty values. Browser constraint validation is independent of the component invalid state.
maxlength number — maxlength={100} Native maximum input length in UTF-16 code units. Browsers usually stop further user input, but do not truncate externally assigned value or defaultValue. Separate from maxCount, which controls the counter hint.
wrap HTMLTextareaAttributes["wrap"] — <Textarea wrap="soft" /> <Textarea wrap="hard" cols={32} /> <Textarea wrap="off" /> Native line-wrap policy: soft wraps visually without adding submission line breaks; hard can add submission line breaks based on column width; off does not wrap automatically. Browser default is soft. The component has no horizontal scrollbar, so soft is preferable for editing long lines.
spellcheck boolean — spellcheck={false} Browser spellcheck setting. When omitted, browser and inherited settings apply; the browser provides the dictionary.
autocomplete HTMLTextareaAttributes["autocomplete"] — autocomplete="street-address" Native autofill hint, such as street-address. Suggestions depend on browser-saved data and are not supplied by the component.
enterkeyhint HTMLTextareaAttributes["enterkeyhint"] — enterkeyhint="done" Mobile Enter-key label hint, such as done, enter, or next. It does not submit or navigate. The keyboard decides its presentation.
inputmode HTMLTextareaAttributes["inputmode"] — inputmode="text" Soft-keyboard mode hint, such as text or numeric. It does not change the string value type or validate the format.
form string — form="feedback-form" Associate a native form in the same document by id, allowing a textarea outside that form’s DOM subtree to participate in submission.
autofocus boolean — autofocus Native textarea autofocus request. The browser decides whether it runs. Prefer using it when the user actively opens an editing region.
tabindex number — tabindex={0} Native Tab order. 0 uses natural order, -1 skips sequential navigation but allows programmatic focus, and a positive number sets priority. Natural order is recommended for ordinary forms.
title string — title="Review comment" Native hint text. The browser decides how to display it; it does not replace a visible label or error.
id string — id="documentation-feedback" id of the internal native textarea for label for and ARIA references. Keep it unique within a document.
resize "none" | "vertical" | "horizontal" | "both" "both" resize="both" Allowed resize direction: none hides the handle; vertical changes height; horizontal changes width; both changes both. readonly and disabled force none. The handle has default minimum width 120px and height 60px. After manual height adjustment, automatic content-height measurement stops.
invalid boolean false invalid Combined with aria-invalid for the component error state. Does not automatically check required, minlength, or maxCount or move focus. When embedded in Field, Field owns the combined visual feedback.
parts ComponentPartsOf<{ Indicator: typeof Indicator }> — parts={{ Indicator: { step: 4, maxHeight: 160 } }} Configure the built-in Indicator, including keyboard step or largeStep, maxWidth or maxHeight bounds, and ariaLabel. Applies only to the generated handle; none exists when resize=none, readonly, or disabled.
onclick (event: MouseEvent) => void — onclick={record} Called on click on the internal native textarea. Receives the native event with currentTarget set to that textarea. The return value is ignored; call event.preventDefault() to cancel a cancelable browser default action.
ondblclick (event: MouseEvent) => void — ondblclick={record} Called on double-click on the internal native textarea. Receives the native event with currentTarget set to that textarea. The return value is ignored; call event.preventDefault() to cancel a cancelable browser default action.
oninput (event: Event) => void — oninput={record} Called when user input changes content, after the bound value has been synchronized on the internal native textarea. Receives the native event with currentTarget set to that textarea. The return value is ignored; call event.preventDefault() to cancel a cancelable browser default action.
onchange (event: Event) => void — onchange={record} Called when a user commits an edited value, usually on blur, after the bound value has been synchronized on the internal native textarea. Receives the native event with currentTarget set to that textarea. The return value is ignored; call event.preventDefault() to cancel a cancelable browser default action.
onfocus (event: FocusEvent) => void — onfocus={record} Called on focus on the internal native textarea. Receives the native event with currentTarget set to that textarea. The return value is ignored; call event.preventDefault() to cancel a cancelable browser default action.
onblur (event: FocusEvent) => void — onblur={record} Called on blur on the internal native textarea. Receives the native event with currentTarget set to that textarea. The return value is ignored; call event.preventDefault() to cancel a cancelable browser default action.
onkeydown (event: KeyboardEvent) => void — onkeydown={record} Called on keydown; the event exposes key and related fields on the internal native textarea. Receives the native event with currentTarget set to that textarea. The return value is ignored; call event.preventDefault() to cancel a cancelable browser default action.
onkeyup (event: KeyboardEvent) => void — onkeyup={record} Called on keyup on the internal native textarea. Receives the native event with currentTarget set to that textarea. The return value is ignored; call event.preventDefault() to cancel a cancelable browser default action.
onkeypress (event: KeyboardEvent) => void — onkeypress={record} Called on the deprecated keypress event; prefer onkeydown in new code on the internal native textarea. Receives the native event with currentTarget set to that textarea. The return value is ignored; call event.preventDefault() to cancel a cancelable browser default action.
onpaste (event: ClipboardEvent) => void — onpaste={record} Called on paste; clipboardData can read the pasted content on the internal native textarea. Receives the native event with currentTarget set to that textarea. The return value is ignored; call event.preventDefault() to cancel a cancelable browser default action.
oncopy (event: ClipboardEvent) => void — oncopy={record} Called on copy; clipboardData can set the copied content on the internal native textarea. Receives the native event with currentTarget set to that textarea. The return value is ignored; call event.preventDefault() to cancel a cancelable browser default action.
oncut (event: ClipboardEvent) => void — oncut={record} Called on cut; clipboardData can set the cut content on the internal native textarea. Receives the native event with currentTarget set to that textarea. The return value is ignored; call event.preventDefault() to cancel a cancelable browser default action.