Introduction Foundations Components Directives Pipes Motion Brand

Alerts & notifications

Buttons & actions

Cards

Forms

Checkbox card Checkbox Currency input Date input Date range calendar File select Input Label Location input Multi select Multiple location input Otp input Phone input Radio Search Segmented date input Select Slider Smart textarea Textarea Timepicker Toggle

Icons / images / media

Layouts

Navigation

Popups / overlays

Progress & loading indicators

Tags

Typography

Components Forms Textarea

Textarea

Multi-line inputs for forms

Contents

Default Auto grow Border radius Borderless Clear button Disabled Display character count Events Icon start Max character Max height Max length Placeholder color Validation

In order to set a maximum height for the textarea component, you'll need to add a class and declare the max-height via CSS. Notice that resizing the textarea below will not exceed 200px.

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

borderRadius ?: TextareaBorderRadius = 'small'
borderless ?: boolean = false
borderlessFocusLine ?: boolean = true
clearButtonIcon ?: IconName = '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.BODY_16
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
iconStart ?: IconName

Icon rendered inside the textarea

iconStartSize ?: IconSize = IconSize.SMALL
label ?: string

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

maxCharacter ?: number
maxCharacterPosition ?: TextareaMaxCharPosition = TextareaMaxCharPosition.LEFT
maxLength ?: number
minHeight ?: number

Minimum height in pixels; overrides the `rows`-based height, and with `autoGrow` it is the floor the textarea grows from.

padding ?: TextareaPadding = 'default'

Field padding; 'compact' reduces the vertical padding, 'none' removes it entirely, e.g. to align with surrounding text

placeholder ?: string = ''
placeholderColor ?: PlaceholderColor = PlaceholderColor.INHERIT

Sets the color of the placeholder text

placeholderNoWrap ?: boolean = false

Disable placeholder wrapping

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

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

size ?: TextSize = TextSize.BODY_16
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