Textarea

Multi-line inputs for forms

Contents

Default

Auto grow

Borderless

Clear button

Disabled

Display character count

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

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

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.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

Alerts & notifications

Buttons & actions

Cards

Forms

Icons / images / media

Layouts

Navigation

Popups / overlays

Progress & loading indicators

Tags

Typography

Textarea