Introduction Foundations Components Directives Pipes Motion Brand

Ai

Ai button Ai chatbot message 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 toolbar that includes a send button and optional attachments and voice input buttons.

Contents

Default Attachments Busy Button text Disabled Hide outer glow Hint Keep keyboard open on submit Max lines Single line Skip label Toolbar variants Validation Voice input

Set showVoiceInputButton to add a microphone to the toolbar. Tap it and speak: dictation shows as grey preview text and commits to the form control when you confirm. Cancel discards the whole session.

The transcript is shown as the browser reports it. Thirty seconds without new speech ends the session and commits what you said; you can also cancel or confirm at any time.

The microphone only renders in Chrome (or Chromium) where the Web Speech API is available, so it does not appear in Firefox, Safari, or Edge.

This field starts with a value to show how dictation joins existing text at the caret.

Speech lands at the caret rather than always at the end, so click into the middle of the sentence before dictating to splice it in there.

Inputs
control : FormControl<string>
allowedAttachmentFileTypes ?: string
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.

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

Replaces submit content with a spinner and disables the button.

buttonHeight ?: number = 36

Height in px of the submit button.

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
isSubmitDisabled ?: boolean = false

Disables submit only; textarea and other controls stay interactive.

keepKeyboardOpenOnSubmit ?: boolean = false

Prevents submit from stealing focus so the virtual keyboard stays open.

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

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 = ''
showAttachmentsButton ?: boolean = false
showButtonIcon ?: boolean = true

False = label-only submit in every state.

showVoiceInputButton ?: boolean = false
skipLabel ?: string

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

squareButton ?: boolean = false

Rounded-rectangle submit instead of round/pill.

voiceLang ?: SpeechRecognitionLang = '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>()