I9kChatOptions

The answer row of an I9kChat footer: a named group of reply buttons aligned to the user side, with a focus() handle so the conversation can move focus to the next question.

View as MarkdownView source

import { I9kChatOptions } from '@9klabs/design';

Examples

Single choice

<I9kChatOptions label="How many of your systems does it connect to?">
  <I9kButton>0–1</I9kButton>
  <I9kButton>2–3</I9kButton>
  <I9kButton>4 or more</I9kButton>
</I9kChatOptions>

Watch out

• The group needs a label; use the question being answered.
• Key the component by question so a multi-select starts empty for each one.

API

Props

Prop	Type	Default	Required
label	string	—	yes

Slots

• default

Agent prompt

Paste this into an agent to have it use the component correctly. It is self-contained.

Use I9kChatOptions from @9klabs/design in the footer slot of I9kChat when the answer is a choice.

import { I9kChatOptions } from '@9klabs/design';

Props:
- label: string (required) — accessible name of the group; use the question text.

Slots: default — the reply buttons (usually I9kButton; use variant="filter" with :active for multi-select).

Exposes: focus() — focuses the first enabled control. Call it after the bot asks the next question so keyboard users land on the answers.

Behavior: buttons wrap and align to the end side (the user's side), mirroring in Arabic.

Usage:
<I9kChatOptions ref="options" label="What are you looking to build?">
  <I9kButton @click="answer('website')">A website</I9kButton>
  <I9kButton @click="answer('app')">An app</I9kButton>
</I9kChatOptions>