Textarea

<ts-textarea> vv0.6.3

The ts-textarea component.

Open in Storybook for interactive demos.

Preview

<ts-textarea resize="vertical" rows="3" size="md"></ts-textarea>

Property	Attribute	Type	Default	Description
`autoGrow`	`auto-grow`	`boolean`	`false`	Whether the textarea auto-grows vertically as content is typed.
`disabled`	`disabled`	`boolean`	`false`	Renders the textarea as disabled.
`error`	`error`	`boolean`	`false`	Renders the textarea in an error state.
`errorMessage`	`error-message`	`string \| undefined`	—	Error message displayed below the textarea.
`helpText`	`help-text`	`string \| undefined`	—	Help text displayed below the textarea.
`label`	`label`	`string \| undefined`	—	Label text displayed above the textarea.
`maxHeight`	`max-height`	`string \| undefined`	—	Maximum height for auto-grow mode (e.g., “300px”).
`maxlength`	`maxlength`	`number \| undefined`	—	Maximum character length.
`name`	`name`	`string \| undefined`	—	Name attribute for form submission.
`placeholder`	`placeholder`	`string \| undefined`	—	Placeholder text.
`readonly`	`readonly`	`boolean`	`false`	Renders the textarea as readonly.
`required`	`required`	`boolean`	`false`	Makes the textarea required.
`resize`	`resize`	`"both" \| "horizontal" \| "none" \| "vertical"`	`'vertical'`	Resize behavior.
`rows`	`rows`	`number`	`3`	Number of visible text rows.
`showCount`	`show-count`	`boolean`	`false`	Whether to show the character counter. Requires maxlength to be set.
`size`	`size`	`"lg" \| "md" \| "sm" \| "xl" \| "xs"`	`'md'`	The textarea size.
`value`	`value`	`string`	`''`	The textarea’s value.

Event	Detail	Bubbles	Composed	Description
`tsBlur`	`void`	Yes	Yes	Emitted when the textarea loses focus.
`tsChange`	`TsChangeEventDetail<string>`	Yes	Yes	Emitted when the value changes (on blur / commit).
`tsFocus`	`void`	Yes	Yes	Emitted when the textarea gains focus.
`tsInput`	`TsChangeEventDetail<string>`	Yes	Yes	Emitted on every keystroke.

Method	Signature	Description
`selectText`	`selectText() => Promise<void>`	Programmatically select the textarea text.
`setFocus`	`setFocus() => Promise<void>`	Programmatically focus the textarea.

Use ::part() to style internal elements:

Part	Description
`base`	The outer wrapper.
`counter`	The character counter element.
`error-text`	The error message wrapper.
`help-text`	The help text wrapper.
`label`	The label element.
`textarea`	The native textarea element.

ts-textarea::part(base) {
  /* your custom styles */
}

<ts-textarea resize="vertical" rows="3" size="md"></ts-textarea>

import { TsTextarea } from '@tessera-ui/react';

<TsTextarea resize="vertical" rows="3"></TsTextarea>