Introduction Foundations Components Patterns Directives Pipes Motion Brand

Alerts & notifications

Buttons & actions

Cards

Forms

Icons / images / media

Layouts

Navigation

Popups / overlays

Progress & loading indicators

Tags

Typography

Textarea

Multi-line inputs for forms

Contents

Default Auto grow Borderless Clear button Disabled Display character count Events Max character Max height Max length Validation

Default validation

Dynamic validation on blur - First validation happens only on blur, and validates on keyup once an error exists

Dynamic validation on submit - First validation happens only on submit, and validates on keyup once an error exists

Inputs
control : FormControl<string>
disabled : boolean
id : string
asInput ?: boolean = false
autoComplete ?: string = 'off'
autoFocus ?: boolean = false
autoGrow ?: boolean = false

Set to `true` to automatically adjust the height of the text area when typing

autoGrowMaxHeight ?: number = 72

Maximum height in pixels the text area will grow. `autoGrow` must be true to have an effect. Minimum height is always the default height based on `rows`.

autoHideCounter ?: boolean = true

Hides max character counter when blurred out of field

borderless ?: boolean = false
borderlessFocusLine ?: boolean = true
clearButtonIcon ?: string = 'ui-bin'
clearButtonIconLabel ?: string
clearButtonIconSize ?: IconSize = IconSize.XSMALL
clearButtonPosition ?: TextAreaClearContentButtonPosition = 'right'

Position in the footer of the clear button. Input does nothing if `maxCharacter` is enabled, it will always go to the opposite side of `maxCharacter`

clearButtonText ?: string
clearButtonTextSize ?: TextSize = TextSize.SMALL
displayCurrentCharCount ?: boolean = false

Displays current/max characters when maxCharacter is provided

dynamicValidation ?: "submit" | "blur"

First validation happens only on blur/submit, and validates on keyup once an error exists

enableClearButton ?: boolean = false
fontColor ?: any = FontColor.FOREGROUND
hideScrollbar ?: boolean = false
label ?: string

Sets aria label for accessibility when there is no associated visible text

maxCharacter ?: number
maxCharacterPosition ?: TextareaMaxCharPosition = TextareaMaxCharPosition.LEFT
maxLength ?: number
placeholder ?: string = ''
resize ?: Resize = Resize.VERTICAL
rows ?: number = 2
size ?: TextSize = TextSize.XSMALL
sizeDesktop ?: TextSize
sizeDesktopXLarge ?: TextSize
sizeTablet ?: TextSize
weight ?: any = FontWeight.NORMAL
weightDesktop ?: FontWeight
weightTablet ?: FontWeight
Outputs
inputBlur ?: any = new EventEmitter<void>()
inputFocus ?: any = new EventEmitter<void>()
inputHandled ?: any = new EventEmitter<void>()
inputSelect ?: any = new EventEmitter<TextareaSelectEvent>()

Event emitted everytime a user highlights a text in the textarea