pnpm add @wandercom/design-system-web

import { ChatMultiOptionQuestion } from '@wandercom/design-system-web/ui/chat-multi-option-question';

export function Example() {
  const [selected, setSelected] = useState<string[]>([]);

  return (
    <ChatMultiOptionQuestion
      description="Select all the pages you want to build."
      onChange={setSelected}
      onSubmit={(values) => respond(values)}
      options={[
        { value: 'home', label: 'Home' },
        { value: 'about', label: 'About' },
      ]}
      question="What pages do you want to show?"
      value={selected}
    />
  );
}

The high-level ChatMultiOptionQuestion composes a prompt, a "select all" row, the option list, and a footer with a live count + submit button. Drop down to the subcomponents (ChatMultiOptionQuestionRoot, ChatMultiOptionQuestionSelectAll, …) when you need a custom layout.

The default question renders the full Figma layout: prompt + description, "Select all" row over a divider, the option list, a divider, and a footer with the count and submit arrow. Submit is disabled until at least one option is selected.

<ChatMultiOptionQuestion
  description="Select all the pages you want to build."
  onChange={setSelected}
  onSubmit={(values) => respond(values)}
  options={pages}
  question="What pages do you want to show?"
  value={selected}
/>

Hide the "Select all" row when the question only has a handful of options or when toggling everything at once doesn’t make sense. The footer still renders whenever onSubmit is provided.

<ChatMultiOptionQuestion
  allowSelectAll={false}
  onChange={setSelected}
  onSubmit={(values) => respond(values)}
  options={amenities}
  question="Which amenities matter most?"
  value={selected}
/>

For full control over layout — custom select-all label, removing the divider, replacing the footer — use the subcomponents directly.

<ChatMultiOptionQuestionRoot
  onChange={setSelected}
  onSubmit={handleSubmit}
  options={rooms}
  value={selected}
>
  <ChatMultiOptionQuestionPrompt description="Pick every room we should photograph.">
    Which rooms are ready to shoot?
  </ChatMultiOptionQuestionPrompt>
  <div className="flex flex-col gap-2">
    <ChatMultiOptionQuestionSelectAll>All rooms in the home</ChatMultiOptionQuestionSelectAll>
    <ChatMultiOptionQuestionDivider />
    <ChatMultiOptionQuestionOptions />
    <ChatMultiOptionQuestionDivider />
    <ChatMultiOptionQuestionFooter />
  </div>
</ChatMultiOptionQuestionRoot>

• Select all is true only when every option is selected. With a partial selection, the checkbox renders an indeterminate dash and clicking it selects every option. Clicking it again with everything selected clears the selection.
• The value array is normalized to the order of the supplied options so consumers can render summaries without re-sorting.
• ChatMultiOptionQuestionSubmit is auto-disabled when the selection is empty. Pass disabled={false} to override, or pass showFooter={false} on the high-level component to hide the footer entirely.

• The root renders as a <fieldset> and is labeled via aria-labelledby pointing at the prompt heading when a Prompt is mounted, so screen readers announce the question on entry. When no Prompt is rendered, pass aria-label on ChatMultiOptionQuestionRoot to label the group instead. To use a native <legend> instead of aria-labelledby, render ChatMultiOptionQuestionPrompt with asChild and pass a <legend> as its child.
• Each option row is a <label> associated with the row's checkbox via htmlFor/id, so the entire row is a single tap target and screen readers announce label + state together. The checkbox renders Radix's role="checkbox" button under the hood.
• The "select all" row uses Radix's indeterminate state and is announced as aria-checked="mixed" when partial.
• The submit button ships with an aria-label of "Submit". Override via the aria-label prop on ChatMultiOptionQuestionSubmit or the high-level component.
• Disabling the root via disabled on ChatMultiOptionQuestionRoot propagates disabled to every checkbox via the native <fieldset> cascade.

ChatMultiOptionQuestion accepts everything ChatMultiOptionQuestionRoot does, plus question, description, allowSelectAll, and showFooter which drive the default composition.

Inherits all <div> props.

Inherits all <label> props except htmlFor and onChange (managed by the root).

Inherits all <label> props except htmlFor and onChange.

Inherits all <div> props. Renders a 1px horizontal rule with aria-hidden="true".

Inherits the Button API except size, variant, type, asChild, and children, which are fixed by the component.

type ChatMultiOptionQuestionItem = {
  value: string;
  label: ReactNode;
};