Skip to content
comp0

comp0

Actions

Suggestions

Quick replies: a labelled group of buttons that each send a value.

When to use it: Use it for a few short follow-ups the assistant proposes. For longer sets use a ListBox or Menu.

On this page
  1. Example
  2. Anatomy
  3. Step by step
  4. Keyboard
  5. Forms and accessibility
  6. API reference

Example

Loading example…
Suggestions.tsxtsx
import { useState } from "react";
import { Status, Suggestion, Suggestions } from "@comp0/react";

export function Example() {
  const [sent, setSent] = useState("");

  return (
    <div className="flex max-w-sm flex-col gap-3">
      <Suggestions aria-label="Quick replies" onSend={setSent} className="flex flex-wrap gap-2">
        <Suggestion
          value="Tell me more about the audit"
          className="rounded border border-zinc-950/10 bg-white px-3 py-2 text-base text-zinc-900 outline-teal-600 focus-visible:outline-2 disabled:opacity-50 sm:text-sm dark:border-white/10 dark:bg-zinc-900 dark:text-zinc-100 dark:outline-teal-400"
        >
          Tell me more
        </Suggestion>
        <Suggestion
          value="Show the failing checks"
          className="rounded border border-zinc-950/10 bg-white px-3 py-2 text-base text-zinc-900 outline-teal-600 focus-visible:outline-2 disabled:opacity-50 sm:text-sm dark:border-white/10 dark:bg-zinc-900 dark:text-zinc-100 dark:outline-teal-400"
        >
          Failing checks
        </Suggestion>
        <Suggestion
          value="Thanks"
          className="rounded border border-zinc-950/10 bg-white px-3 py-2 text-base text-zinc-900 outline-teal-600 focus-visible:outline-2 disabled:opacity-50 sm:text-sm dark:border-white/10 dark:bg-zinc-900 dark:text-zinc-100 dark:outline-teal-400"
        >
          Thanks
        </Suggestion>
      </Suggestions>
      <Status className="text-sm text-zinc-600 dark:text-zinc-400">
        {sent && `Sent: ${sent}`}
      </Status>
    </div>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

A wireframe sketch of the assembled component. Each numbered marker matches a part in the list that follows.

  1. Suggestions

    Labelled group that receives the chosen value. Owns a DOM element.

  2. Suggestion

    A quick reply button. Owns a DOM element.

Step by step

  1. 1

    Add the main part

    Wrap Suggestion buttons in Suggestions and give the group an aria-label.

  2. 2

    Add the supporting parts

    Give each Suggestion a value, which is what gets sent, and visible text.

  3. 3

    Make the behavior clear

    Handle onSend on the root and disable the group while a reply is generating.

    Exampletsx
    <Suggestions aria-label="Quick replies" onSend={send} disabled={generating}>
  <Suggestion value="Summarize this">Summarize</Suggestion>
</Suggestions>;

Keyboard

⇥
Moves between suggestions in the normal tab order.
↵
Sends the focused suggestion.
Space
Sends the focused suggestion.

Forms and accessibility

Suggestions are plain buttons and submit nothing.

Accessibility checklist

  • Name the group; the buttons keep the normal tab order instead of a hidden arrow-key toolbar.
  • Use visible text that makes sense out of context, since the value may differ from the label.
  • Disable the group, rather than removing it, while a reply is generating so focus is not lost.

API reference

Importtsx
import { Suggestion, Suggestions } from "@comp0/react";

Suggestions

DOM element

Labelled group that receives the chosen value.

PropTypeDescription
onSend(value: string) => voidCalled with the value of the chosen suggestion.
disabledbooleanDisables every suggestion.
asElementTypeRenders another element in place of the div.

Suggestion

DOM element

A quick reply button.

PropTypeDescription
valuestringText sent through onSend; the children are the visible label.

Style hooks

Attributes that appear while a state is true. Target them with Tailwind data variants such as data-open:bg-zinc-100, or with any CSS selector.

Suggestions

Style hookMeaning
[data-disabled]The group or suggestion is disabled.

Suggestion

Style hookMeaning
[data-disabled]The group or suggestion is disabled.

Keep exploring