Introduction Foundations Components Directives Pipes Motion Brand

Ai

Ai button Ai chatbot message Ai input Ai modal Ai question card Ai text editor Ai textarea Ai user bubble

Cards

Controls

Freelancer domain

Loading

Modals

Structure

Text & links

Patterns Ai Ai textarea

Ai textarea

AI textarea with a send button and optional attachment and voice input buttons

Contents

Attachments
Busy
Button text
Disabled
Hide outer glow
Hint
Keep keyboard open on valid submit
Max lines
Single line
Skip label
Toolbar variants
Tooltip
Validation
Voice input
Inputs
control : FormControl<string>
allowedAttachmentFileTypes ?: string
alwaysShowButtonText ?: boolean = false

Keeps the submit label visible regardless of `minCharacters`.

animateButton ?: boolean = true

False = static submit button (no expand/sweep or label fade-in).

attachmentUploads ?: readonly AiTextareaAttachmentUpload[] = []

Per-file upload progress; matched by `File` reference. Requires `showAttachmentsButton`.

attachmentsControl ?: any = new FormControl<readonly File[]>([], { nonNullable: true, })

Only used when `showAttachmentsButton` is true.

attachmentsTooltipText ?: any = $localize`:Ai textarea add attachments button tooltip:Add attachments`

Tooltip on the attachments button. Shown when `showTooltip` is true.

autoFocus ?: AutoFocusOption = AutoFocusOption.NONE
busy ?: boolean = false

Replaces submit content with a spinner and disables submit and skip.

buttonHeight ?: number = 36

Height in px of the submit button.

buttonIcon ?: IconName = 'flArrowUpAltOutline'

Icon shown in the submit button when `showButtonIcon` is true.

buttonPaddingHorizontal ?: number = 12

Horizontal padding in px of the static (`animateButton: false`) submit button.

buttonText ?: string = ''

Submit expands to a labelled pill once `minCharacters` is reached.

fontSize ?: number = 20

Textarea font size (px) on tablet and up.

fontSizeMobile ?: number = 16

Textarea font size (px) on mobile.

hideOuterGlow ?: boolean = false

Removes the outer glow only; gradient border stays.

hint ?: string
isDisabled ?: boolean = false

Disables the whole field: typing, attachments, voice, submit and skip. Takes precedence over `isSubmitDisabled` and `isSkipDisabled`. Unlike `control.disable()`, the control's value and validity are left alone.

isSkipDisabled ?: boolean = false

Disables skip only; textarea and other controls stay interactive.

isSubmitDisabled ?: boolean = false

Disables submit only; textarea and other controls stay interactive.

keepKeyboardOpenOnValidSubmit ?: boolean = false

Keeps the virtual keyboard open after a valid submit. Invalid submits always keep it open so the user can correct the textarea or attachments.

label ?: string
maxLines ?: number = 12

Scrollable line count on desktop/tablet.

maxLinesMobile ?: number = 10

Scrollable line count on mobile (>= 400px).

maxLinesMobileSmall ?: number = 7

Scrollable line count on small mobile (<400px).

minCharacters ?: number = 6

Character threshold for submit expand (requires `buttonText`).

minHeight ?: number

Minimum height in px of the whole box. Not used with `minLines` of 1; pair with a low `minLines` so the rows alone do not already exceed it.

minLines ?: number = 4

Lines shown at rest before auto-grow, including the stacked toolbar row. Set to 1 for a single-line field with the button inline.

placeholder ?: string = ''
shakeOnError ?: boolean = true

False = never shake on errors.

showAttachmentsButton ?: boolean = false
showButtonIcon ?: boolean = true

False = label-only submit in every state.

showTooltip ?: boolean = false

Shows the attachments and voice button tooltips.

showVoiceInputButton ?: boolean = false
skipLabel ?: string

Toolbar text button before submit; pair with `onSkip`.

squareButton ?: boolean = false

Rounded-rectangle submit instead of round/pill.

voiceInputTooltipText ?: any = $localize`:Ai textarea voice input start button tooltip:Enable voice input`

Tooltip on the voice button. Shown when `showTooltip` is true.

voiceLang ?: "en-US" = 'en-US'

BCP-47 tag for voice recognition. English-only for V1.

Outputs
onAttachmentsClick ?: any = new EventEmitter<void>()
onBlur ?: any = new EventEmitter<void>()
onFocus ?: any = new EventEmitter<void>()
onInputHandled ?: any = new EventEmitter<void>()
onSkip ?: any = new EventEmitter<void>()
onSubmit ?: any = new EventEmitter<void>()
onVoiceInputClick ?: any = new EventEmitter<void>()