Textarea

<ts-textarea> vv0.4.0

The ts-textarea component.

Open in Storybook for interactive demos.

Preview

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

Properties

Property	Attribute	Type	Default	Description
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.
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.
size	size	"lg" | "md" | "sm" | "xl" | "xs"	'md'	The textarea size.
value	value	string	''	The textarea’s value.

Events

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.

Methods

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

CSS Parts

Use ::part() to style internal elements:

Part	Description
base	The outer wrapper.
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 */
}

Usage

HTML

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

React

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

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