Introduction Foundations Components Directives Pipes Motion Brand

Ai

Ai button Ai modal Ai text editor Ai textarea

Cards

Controls

Freelancer domain

Loading

Modals

Structure

Text & links

Patterns Ai Ai textarea

Ai textarea

AI textarea with a toolbar that includes a send button and optional attachments and voice input buttons.

Contents

Default Button text Hint Keep keyboard open on submit Max lines Toolbar variants Validation

By default, the textarea becomes scrollable at 12 lines on desktop and tablet, 10 lines on mobile, and 7 lines on small mobile screens.

The limits are customizable via the maxLines, maxLinesMobile and maxLinesMobileSmall inputs. This example becomes scrollable at 10 lines on desktop, 5 lines on mobile, and 3 lines on small mobile screens.

Inputs
control : FormControl<string>
autoFocus ?: any = AutoFocusOption.NONE
buttonText ?: string = ''

When set, the submit button expands into a labelled pill once minCharacters is reached.

hint ?: string
keepKeyboardOpenOnSubmit ?: boolean = false

Keep the virtual keyboard open when the submit button is tapped to prevent the button from stealing focus from the textarea. This lets validation errors/shake show in place instead of after the keyboard closes.

label ?: string
maxLines ?: number = 12

Line count at which the textarea becomes scrollable on desktop/tablet.

maxLinesMobile ?: number = 10

Line count at which the textarea becomes scrollable on mobile (>= 400px).

maxLinesMobileSmall ?: number = 7

Line count at which the textarea becomes scrollable on small mobile (<400px).

minCharacters ?: number = 6

Character threshold at which the submit button expands (requires buttonText).

placeholder ?: string = ''
showAttachmentsButton ?: boolean = false
showVoiceInputButton ?: boolean = false
Outputs
onAttachmentsClick ?: any = new EventEmitter<void>()
onBlur ?: any = new EventEmitter<void>()
onFocus ?: any = new EventEmitter<void>()
onInputHandled ?: any = new EventEmitter<void>()
onSubmit ?: any = new EventEmitter<void>()
onVoiceInputClick ?: any = new EventEmitter<void>()