TextArea

Import

import { TextArea } from 'tuimorphic';

Basic Usage

<TextArea placeholder="Enter your message..." />

Props

Prop	Type	Default	Description
`label`	`string`	—	Label text for the textarea
`rows`	`number`	`4`	Number of visible rows
`caretChars`	`string`	`' '`	Custom caret character
`isBlink`	`boolean`	`true`	Whether the caret should blink
`value`	`string`	—	Controlled value
`defaultValue`	`string`	—	Default value for uncontrolled mode
`placeholder`	`string`	—	Placeholder text
`disabled`	`boolean`	`false`	Whether the textarea is disabled
`readOnly`	`boolean`	`false`	Whether the textarea is read-only
`maxLength`	`number`	—	Maximum character length
`onChange`	`(event: ChangeEvent) => void`	—	Change event handler
`onFocus`	`(event: FocusEvent) => void`	—	Focus event handler
`onBlur`	`(event: FocusEvent) => void`	—	Blur event handler
`className`	`string`	—	Additional CSS class names
`ref`	`React.Ref<HTMLTextAreaElement>`	—	Forwarded ref to the textarea element

All standard HTML textarea attributes are also supported.

With Label

Description

<TextArea label="Description" placeholder="Enter a description..." />

Row Heights

Control the visible height with the rows prop:

Message

<TextArea label="2 rows" rows={2} placeholder="Small textarea..." />
<TextArea label="4 rows (default)" rows={4} placeholder="Default textarea..." />
<TextArea label="8 rows" rows={8} placeholder="Large textarea..." />

With Placeholder

<TextArea placeholder="Write your message here..." rows={4} />

Custom Caret

<TextArea label="Default caret" placeholder="Type here..." />
<TextArea label="Block caret" caretChars="█" placeholder="Type here..." />
<TextArea label="No blink" isBlink={false} placeholder="Type here..." />

States

<TextArea label="Default" placeholder="Enabled textarea" />
<TextArea label="Disabled" placeholder="Disabled textarea" disabled />
<TextArea label="Read-only" value="Read-only content..." readOnly />

Controlled with Character Count

const [value, setValue] = useState('');
const charCount = value.length;
const maxChars = 280;
 
<TextArea
  label="Tweet"
  value={value}
  onChange={(e) => setValue(e.target.value)}
  placeholder="What's happening?"
  rows={4}
  maxLength={maxChars}
/>
<div>{charCount}/{maxChars} characters</div>

Accessibility

Semantic <textarea> element with proper labeling
Supports all standard textarea attributes
Keyboard accessible with visible focus states
Works with screen readers

Styling

Variable	Description
`--theme-border`	Textarea border color
`--theme-background`	Textarea background color
`--theme-text`	Textarea text color
`--theme-focused-border`	Border color when focused

Input - Single-line text input
Select - Dropdown selection

On this page