Introduction Foundations Components 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 Placeholder color Validation

Default validation

Default textarea without showing validation error message

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 ?: AutoFocusOption = AutoFocusOption.NONE
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.SMALL
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 = ''
placeholderColor ?: PlaceholderColor = PlaceholderColor.INHERIT

Sets the color of the placeholder text

resize ?: Resize = Resize.VERTICAL
rows ?: number = 2
showValidationError ?: boolean = true

When false, suppresses in-component validation error messages and shaking animations.

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