/
1.1k
Sponsor

Text Area

PreviousNext

Multi-line text editor with word wrap

InkOpenTUI
Terminal

Installation

$ pnpm dlx shadcn@latest add @termcn/ink/text-area

Usage

import { TextArea } from "@/components/ui/text-area";
<TextArea
  label="Description"
  placeholder="Enter a description..."
  rows={4}
  onSubmit={(value) => console.log("Submitted:", value)}
/>

API Reference

TextArea

PropTypeDefault
valuestring-
onChange(value: string) => void-
onSubmit(value: string) => void-
placeholderstring""
rowsnumber4
labelstring-
idstring-
borderStyle"single" | "double" | "round" | "bold" | "singleDouble" | "doubleSingle" | "classic""round"
paddingXnumber1
cursorstring"█"

Notes

Accessibility

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

  • Keyboard: Left / Right move by grapheme, Home / End move to the boundaries, and Backspace / Delete remove one complete grapheme. Enter submits or confirms (Ctrl+Enter in TextArea); Tab / Shift+Tab leave through Ink focus traversal.
  • Focus and composition: Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
  • Screen reader: Ink labels and semantic state expose the component without relying on visual styling alone.