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

To add attachments, the showAttachmentsButton input must be true, and the attachmentsControl input is required. The attachmentsControl is a FormControl<readonly File[]> like fl-file-select.

In this example, that control has a value change handler that rejects duplicate files. The error is shown below the textarea as a validation error. Meanwhile, the text control has a validator that requires at least 6 characters.

The footer shows a single error using recency. When both the text and the attachments are invalid, whichever the user triggered most recently is shown. To see it, submit with too few characters (text error), then attach the same file twice (attachment error takes over), then submit again (text error returns).

Attached (0):

Nothing yet.

While the consumer uploads a file, set loading on its attachment preview to show a blue progress circle (driven by progress, from 0 to 100) on a plain tile. Set error instead to show the failed state, which is a warning icon in the center. Uploading and failed tiles stay clickable, the media viewer shows a status caption instead of a preview. Files can still be removed.

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