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 question card

Ai question card

Question card shown inline in a conversational AI thread when the AI chatbot asks a question.

Contents

Default
Border
Disabled
Loading
Question

By default the card embeds the AI textarea. Picking options composes their labels into it as editable text, and editing or clearing that text clears the selection.

What should the logo include?

1 of 3

Set fieldType to input for a single-line field. Picking options leaves it empty, and the answer is composed at submit as a comma-joined list of the picked labels, plus anything the user typed separated by an em dash.

What should the logo include?

1 of 3

Set fieldType to none when only an option is a valid answer. There is no field to type in, skip, or submit, so a pick is the only way to send an answer. This is only valid with single-select questions.

Do you already have brand guidelines?

Inputs in Field type
fieldType ?: AiQuestionCardFieldType = 'textarea'

The field to embed. `none` is only valid with single-select questions: there is no field or submit control, so a pick is the only way to answer.

Also set in this example
question : AiQuestion
totalQuestions ?: number
Outputs
onSelectionCleared ?: any = new EventEmitter<void>()
onSkip ?: any = new EventEmitter<void>()
onSubmit ?: any = new EventEmitter<string>()