Textarea

Multi-line text area with configurable rows, resize behavior, and an auto-resize mode that grows with content.

import { Textarea } from 'phoundry-ui';

Basic

Length: 0

Show code

<Textarea value={text} oninput={(v) => text = v} placeholder="Write something..." />

Auto-resize

Show code

<Textarea
  value={text}
  oninput={(v) => text = v}
  resize="auto"
  rows={2}
/>

Sizes

Show code

<Textarea value={sm} oninput={(v) => sm = v} placeholder="Small" size="sm" rows={2} />
<Textarea value={md} oninput={(v) => md = v} placeholder="Medium" size="md" rows={2} />
<Textarea value={lg} oninput={(v) => lg = v} placeholder="Large" size="lg" rows={2} />

Variants

Show code

<Textarea variant="outline" … />
<Textarea variant="fill" … />
<Textarea variant="ghost" … />

Resize none & disabled

Show code

<Textarea resize="none" rows={4} … />

Props

Prop	Type	Default	Description
value	string	''	Current textarea value.
onchange	(value: string) => void	—	Fires on blur after value changes
oninput	(value: string) => void	—	Fires on every keystroke
placeholder	string	—	Placeholder text
rows	number	3	Initial visible rows
resize	'none' \| 'vertical' \| 'auto'	'vertical'	Resize behavior — 'auto' grows with content
size	'sm' \| 'md' \| 'lg'	'md'	Typography and padding from `controlSizes` (no fixed height)
disabled	boolean	false	Disables the textarea
readonly	boolean	false	Makes the textarea read-only
class	string	—	Additional CSS classes
id	string	—	HTML id attribute
name	string	—	HTML name attribute for forms
element	HTMLTextAreaElement	—	Bindable reference to the underlying textarea element
…rest	HTMLAttributes<textarea>	—	Forwarded native attributes (`rows` also exists as an explicit prop).

Usage tips

Use resize="auto" for comment boxes or chat inputs where height should match content.
Set resize="none" when the textarea lives inside a fixed-height layout (e.g. a split pane).
Pair with FormField to add a label, helper text, and character count.
The auto-resize mode recalculates on every input — for very long documents, prefer resize="vertical".