Textarea
Multi-line text entry.
You might be looking for:
- Input
Single-line text entry.
- Number Input
Enter an amount — raw or formatted.
- Date Picker
Pick a calendar date from a popover.
Playground
<Textarea placeholder="Type your message here." className="resize-none" />Usage
import { Textarea } from "@sophic/portal-ui/components/ui/textarea";<Textarea placeholder="Type your message here." />The height tracks the content (field-sizing-content) with a sensible
minimum, so rows alone has no lasting effect. For a fixed height pass
rows together with className="field-sizing-fixed".
Standalone textareas show a light custom resize handle in the
bottom-right corner (native browser grip is hidden). Hover scales it
slightly and switches to a grab cursor. Pass resizable={false} or
className="resize-none" to hide it — Field and Input Group also hide
the handle. In app forms, Textarea is used inside the
Field family with react-hook-form; the demo here is
standalone.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
resizable | boolean | true | Custom corner handle. Off when disabled, resize-none, or nested in Field / Input Group. |
Also accepts every native <textarea> attribute.
Tokens
Textarea reads --input-* when standalone and --field-control-* inside a
Field card. Fallbacks keep apps without those tokens on the previous look.
Changelog
- 3 October 2026 — Dark standalone fill tracks Field (one step above the card). Full notes
- 8 September 2026 — Standalone corners use 16px (
--radius-2xl) on product tokens. Full notes - 20 August 2026 — “You might be looking for” also maps to Date Picker. Full notes
- 19 August 2026 — “You might be looking for” map to Input and Number Input. Full notes
- 19 August 2026 — Styles live in a CSS module; look and tokens unchanged. Full notes
- 22 July 2026 — Soft standalone styling + custom resize handle. Full notes
- 14 July 2026 — Component page added (was in the library undocumented). Full notes