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

A clear button can be added to the left and right to the footer of the textarea. By default it will be placed to the right. The clear button will clear the contents of the textarea

The clear content can also be positioned to the left if needed.

The text and icon of the clear button can be customized as needed.

The clear button can also just be an icon.

The max character takes precedence in positioning within the footer. The clear button will always be at the opposite side of the max character. count

256 characters left
256 characters left

The error message overrides anything on the left side.

Sample error message.

Sample error message.

256 characters left
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