pnpm add @wandercom/design-system-web

import { ChatMultiChoiceQuestion } from '@wandercom/design-system-web/ui/chat-multi-choice-question';
import { useState } from 'react';

export function Example() {
  const [value, setValue] = useState<string | null>(null);

  return (
    <ChatMultiChoiceQuestion
      question="Photos"
      description="Use your current photos, or have us curate new imagery that fits your brand."
      options={[
        { value: 'new', label: 'Use new high quality photos' },
        { value: 'existing', label: 'Use my existing photos' },
      ]}
      value={value}
      onChange={setValue}
      onSubmit={(answer) => respond(answer)}
    />
  );
}

ChatMultiChoiceQuestion is the assistant-side counterpart to a chat composer: an assistant message poses a question, the user picks one of the offered options (or, optionally, types a free-form answer), and the response is submitted back to the conversation. Selecting an option auto-submits via onSubmit — there is no dedicated submit button by default.

A vertical stack of single-select option cards. The currently selected option is highlighted with a filled surface and a trailing arrow.

<ChatMultiChoiceQuestion
  question="Photos"
  description="Use your current photos, or have us curate new imagery that fits your brand."
  options={[
    { value: 'new', label: 'Use new high quality photos' },
    { value: 'existing', label: 'Use my existing photos' },
  ]}
  value={value}
  onChange={setValue}
/>

A free-form text input renders by default below the options, separated by a divider — wire it up with otherValue / onOtherChange. Submitting the input (Enter or the trailing arrow button) calls onSubmit with { other: string }. Pass allowUserInput={false} to hide it.

<ChatMultiChoiceQuestion
  question="Photos"
  description="Use your current photos, or have us curate new imagery."
  options={[
    { value: 'new', label: 'Use new high quality photos' },
    { value: 'existing', label: 'Use my existing photos' },
  ]}
  value={value}
  onChange={setValue}
  allowUserInput
  otherValue={other}
  onOtherChange={setOther}
  onSubmit={(answer) => {
    if (typeof answer === 'string') respondWithChoice(answer);
    else respondWithText(answer.other);
  }}
/>

For full control over layout — for example, dropping the prompt because the assistant message already provides context — use the compound subcomponents directly.

import {
  ChatMultiChoiceQuestionRoot,
  ChatMultiChoiceQuestionPrompt,
  ChatMultiChoiceQuestionOptions,
  ChatMultiChoiceQuestionOther,
  ChatMultiChoiceQuestionSubmit,
} from '@wandercom/design-system-web/ui/chat-multi-choice-question';

<ChatMultiChoiceQuestionRoot
  options={options}
  value={value}
  onChange={setValue}
  allowUserInput
  otherValue={other}
  onOtherChange={setOther}
  onSubmit={respond}
>
  <ChatMultiChoiceQuestionPrompt description="Use your current photos, or have us curate new imagery.">
    Photos
  </ChatMultiChoiceQuestionPrompt>
  <ChatMultiChoiceQuestionOptions />
  <ChatMultiChoiceQuestionOther placeholder="Tell us what you'd prefer" />
</ChatMultiChoiceQuestionRoot>;

The compound subcomponents are also exposed under the namespace export: ChatMultiChoiceQuestion.Root, .Prompt, .Options, .Other, .Submit.

Root provides selection state and submit context to its compound subcomponents and owns the radiogroup wrapper. Use this when you need full layout control — the top-level ChatMultiChoiceQuestion covers the common case.

• The root renders role="radiogroup" with an aria-labelledby reference to the prompt heading when one is provided.
• Each option is a <button role="radio"> with aria-checked. Only the currently selected option (or the first option, when no selection has been made) is in the tab sequence (tabIndex={0}); other options are tabIndex={-1} and reachable via arrow keys.
• Keyboard interaction:
  • Arrow Down / Arrow Right — move focus to the next option (wraps).
  • Arrow Up / Arrow Left — move focus to the previous option (wraps).
  • Home / End — focus the first / last option.
  • Enter / Space — activate the focused option (native button behavior).
• Disabled options are skipped during arrow navigation.
• The free-form Other row reuses ChatInputInline: pressing Enter on the input submits the value, and the trailing send button is disabled while the input is empty.
• The trailing arrow icon on the selected option is aria-hidden — selection is communicated via aria-checked.

• Auto-submit on selection mirrors Claude's AskUserQuestion behavior. If you need an explicit submit step, drop onSubmit from Root and render ChatMultiChoiceQuestion.Submit yourself; the button reads selection state from context.
• When allowUserInput is true and the user types a non-empty value, the submit button on the Other row activates regardless of whether a card is also selected — selecting a card still auto-submits the card value.