Textarea

Status: Experimental

Textarea preserves a native <textarea> while applying Frasto’s typography, border, focus, disabled, read-only, invalid, and resize rules. It is intended for notes, descriptions, messages, and other multiline values.

Preview

Internal note

Basic usage

---
import { Textarea } from '@freightpx/frasto';
---

<label for="description">Description</label>
<Textarea id="description" name="description" rows={5} />

Native attributes such as name, required, maxlength, autocomplete, and aria-* are forwarded.

Initial value

Use value or the default slot to provide server-rendered initial content.

<Textarea name="notes" value="Existing account context" />

<Textarea name="summary">
  Existing summary
</Textarea>

When both are provided, value takes precedence. Browser and application form state remain native after rendering.

Sizes

Size	Minimum height	Typical use
sm	80px	dense filters and compact notes
md	96px	default forms
lg	112px	longer descriptions and editorial forms

rows can increase the rendered height beyond the size minimum.

Resize behavior

Value	Behavior
vertical	default; users may increase height without disturbing horizontal layout
none	fixed by the layout or application
horizontal	horizontal resizing only
both	native resizing in both directions

Prefer vertical for ordinary application forms. Use none only when the surrounding layout already provides a deliberate expansion mechanism.

Invalid, disabled, and read-only

Incomplete noteUnavailableVisible and copyable

invalid adds the danger border and aria-invalid="true". Error copy remains application content and should be associated with aria-describedby.

API

Prop	Type	Default	Purpose
size	'sm' | 'md' | 'lg'	'md'	minimum height, text size, and spacing
resize	'none' | 'vertical' | 'horizontal' | 'both'	'vertical'	native resize direction
rows	number	4	initial native row count
value	string | number	—	server-rendered initial content
invalid	boolean	false	danger treatment and invalid semantics
fullWidth	boolean	true	fills the available inline size
class	string	—	adds a consumer class

Accessibility

• Associate every textarea with a visible label.
• Use placeholder text only for examples or format hints.
• Connect descriptions, limits, and errors with aria-describedby.
• Prefer readonly when content should remain focusable and copyable.
• If a character limit matters, communicate it in visible text instead of relying only on maxlength.

Responsive behavior

Textarea fills its container by default and preserves its minimum height on narrow screens. Vertical resize is the safest default because it does not create horizontal page overflow.