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

Border
Disabled
Field type
Loading
Question

The question card is usually rendered alongside the AI chatbot message and user bubble to build a conversation. It asks a single question with selectable choices and an embedded AI textarea, so the user can pick an answer or type their own before submitting.

AI chatbot avatar

What have you done or started?

A pre-existing platform for sales

AI chatbot avatar

Let's refine your idea. Nothing's locked in yet. You can edit your idea later.

Who would your ideal customer be?

2 of 3
Inputs
question : AiQuestion
autoFocus ?: AutoFocusOption = AutoFocusOption.DESKTOP
disableChoices ?: boolean = false
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.

hideBorder ?: boolean = false

Drops the gradient border, outer glow, fill, and outer padding.

hideFieldOuterGlow ?: boolean = true

Hides the embedded field's outer glow.

isLoading ?: boolean = false

Swaps the question and options for placeholder rows and locks the field while the next question is fetched, so the card stays on screen between questions instead of unmounting. The bound `question` is ignored until it turns off.

isSkipDisabled ?: boolean = false
isSubmitDisabled ?: boolean = false
placeholder ?: any = $localize`:AI question card free text placeholder:Add more details...`

Placeholder for the embedded field.

skipLabel ?: any = $localize`:AI question card skip question button label:Skip question`

Text for the embedded field's skip button. Pass '' to drop the button.

totalQuestions ?: number
Outputs
onSelectionCleared ?: any = new EventEmitter<void>()
onSkip ?: any = new EventEmitter<void>()
onSubmit ?: any = new EventEmitter<string>()