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

A hint can be provided to give additional context to the user. It appears below the textarea when it is focused, and disappears when the user blurs the field. When the field is submitted with an invalid value, the hint is replaced by a validation error, if validators are provided.

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>()