Textarea

The TkTextarea component enables multi-line text input with customizable size, validation, and styling options.

React

import { TkTextarea } from '@takeoff-ui/react'

Vue

import { TkTextarea } from '@takeoff-ui/vue'

Angular

import { TkTextarea } from '@takeoff-ui/angular'

Basic

A simple TkInput display.

View Code

React

<TkTextarea
  label="Textarea"
  hint="Hint text"
  placeholder="Placeholder text"
/>

Vue

<TkTextarea
  label="Textarea"
  hint="Hint text"
  placeholder="Placeholder text"
/>

Angular

<tk-textarea
  label="Textarea"
  hint="Hint text"
  placeholder="Placeholder text"
/>

Size

The "size" prop can be used with one of the sizes "small", "base", and "large". The default value is "base".

View Code

React

<TkTextarea
  label="Small Textarea"
  size="small"
/>
<TkTextarea
  label="Base Textarea"
  size="base"
/>
<TkTextarea
  label="Large Textarea"
  size="large"
/>

Vue

<TkTextarea
  label="Small Textarea"
  size="small"
/>
<TkTextarea
  label="Base Textarea"
  size="base"
/>
<TkTextarea
  label="Large Textarea"
  size="large"
/>

Angular

<tk-textarea
  label="Small Textarea"
  size="small"
/>
<tk-textarea
  label="Base Textarea"
  size="base"
/>
<tk-textarea
  label="Large Textarea"
  size="large"
/>

State

This example illustrates the disabled, readonly, and invalid states of the input field. Each state demonstrates how the input behaves and visually changes in different interaction scenarios.

View Code

React

<TkTextarea
  label="Error"
  placeholder="Error"
  invalid={true}
  error="Bu alan zorunludur"
/>
<TkTextarea
  label="Readonly"
  placeholder="Readonly"
  readonly
/>
<TkTextarea
  label="Disabled"
  placeholder="Disabled"
  disabled
/>

Vue

<TkTextarea
  label="Error"
  placeholder="Error"
  :invalid="true"
  error="Bu alan zorunludur"
/>
<TkTextarea
  label="Readonly"
  placeholder="Readonly"
  readonly
/>
<TkTextarea
  label="Disabled"
  placeholder="Disabled"
  disabled
/>

Angular

<tk-textarea
  label="Error"
  placeholder="Error"
  [invalid]="true"
  error="Bu alan zorunludur"
/>
<tk-textarea
  label="Readonly"
  placeholder="Readonly"
  [readonly]="true"
/>
<tk-textarea
  label="Disabled"
  placeholder="Disabled"
  [disabled]="true"
/>

API

Props

Name	Type	Default	Description
	boolean	false	If true, the user cannot interact with the input.
	string	null	This is the error message that will be displayed.
	string	null	Provided a hint or additional information about the input.
	boolean	false	Indicates whether the input is in an invalid state
	string	null	Defines the label for the element.
	number	null	Limits the number of characters.
	string	null	The name of the control, which is submitted with the form data.
	string	null	Placeholder text displayed when the input is empty.
	boolean	false	If true, the user cannot modify the value.
	number	3	Represents the rows value of the component
	boolean	false	Displays a red asterisk (*) next to the label for visual emphasis.
	"base", "large", "small"	'base'	Sets size for the component.
	number, string	''	The value of the input.

Events

Name	Description
tk-blur	Emitted when the input loses focus.
tk-change	Emitted when the value has changed.
tk-focus	Emitted when the input has focus.
tk-input	Emitted when a keyboard input occurred.

Methods

Name	Description
setFocus	Sets focus on the specified tk-input. Use this method instead of the global input.focus().