Textarea KIT

Examples API Setup
-
Name and descriptionType Value
[disabled]
Disabled state (formControl.disable())
boolean
[expandable]
Control height can be expanded to show all content
boolean
[maxLength]
Use maxLength for highlighting extra characters. If you want to limit the number of characters, add <textarea tuiTextfieldLegacy /> with native maxlength attribute.
number
[rows]
A number of visible rows in expandable mode
number
8
[tuiTextfieldIcon]
Icon content. If content is a string, it is used as stringified svg or a name of an icon
PolymorpheusContent
''
Can be expanded with TuiHint

Requires you to import TuiHint

Name and descriptionType Value
[tuiHintContent]
Content of a hint
PolymorpheusContent
''
[tuiHintDirection]
Hint direction
TuiHintDirection  |  TuiHintDirection[]
'bottom-left'
[tuiHintAppearance]
Hint mode
string
''
Can be expanded with TuiTextfieldController

Requires you to import TuiTextfieldControllerModule

Name and descriptionType Value
[tuiTextfieldCleaner]
Shows a cross to reset a value
boolean
[tuiTextfieldCustomContent]
Right content (e.g. avatar with maximum size 32x32px)
PolymorpheusContent
''
[tuiTextfieldLabelOutside]
Label is outside a component and made with Label

( labelOutside = false does not work together with size === 's' : for s-size inputs use only outside labels)

boolean
[tuiTextfieldSize]
Size
TuiSizeS  |  TuiSizeL
'l'
[tuiTextfieldIconLeft]
A left icon. It can be stringified svg.
string
''
Inherited from TuiReactiveControl
Name and descriptionType Value
[readOnly]
Component is read only
boolean
[pseudoInvalid]
Set invalid state regardless of control
null  |  boolean
Inherited from TuiInteractive
Name and descriptionType Value
[focusable]
Element can be focused
boolean
[nativeId]
Native ID attribute for element. It helps users with Screen Readers to use a page
string
[pseudoHover]
Visual hovered state
null  |  boolean
[pseudoFocus]
Visual focused state
null  |  boolean
[pseudoActive]
Visual pressed state
null  |  boolean
(focusedChange)
Emits on focus and blur
boolean Emit!

Native <textarea> inside TuiTextarea

Learn more how to set some attributes or listen to events on native textarea in this example

Name and descriptionType Value
[placeholder]
Text displayed in a text field when the it has no value
string