Suggestion

For development, import Suggestion from @servicetitan/anvil2-ai-kit. For design, find it in the AI Kit Web Component Library file.

Options

A single chip is one tappable follow-up; SuggestionList groups a capped set of chips (design caps at 3, ~40 characters each) beneath an agent response.

List of Suggestions

SuggestionList renders one chip per entry in suggestions and exposes the set to assistive tech as one labelled group — “Suggested replies” by default. Selecting a chip fires onSelect with that suggestion’s text and index; clearing the list and inserting the text into the message input is the consumer’s job.

Disabled

isDisabled dims the chip and blocks press and hover, but keeps it focusable for keyboard users.

Behavior

The chip responds to hover, press, and keyboard focus, and a list of chips wraps to fit its container.

Visual States

Hover and press shift the surface fill and lift to match Card; keyboard focus adds a ring without changing the fill.

Wrapping

SuggestionList wraps chips onto new lines once a row runs out of width, rather than overflowing or shrinking the chips.

Usage Guidelines

When to Use

Use the Suggestion or Suggestion List when:

One follow-up prompt – A single tappable chip offers one quick follow-up action or prompt. Use the Suggestion.
Follow-ups beneath an agent response – A small set of prompts sits under an agent response as one labelled group. Use the Suggestion List.

When not to use

Avoid using the Suggestion or Suggestion List for:

Several separate chips – Placing individual Suggestion chips side by side skips the shared group label and selection handling. Use the Suggestion List instead.
More than three prompts or long prompts – The Suggestion List does not enforce content limits. Trim the set to three suggestions of about 40 characters each.

Keyboard Interaction

Users can navigate and select a Suggestion using standard keyboard controls.

Key	Description
Tab	Moves focus to the next chip
Enter / Space	Activates the focused chip

Code

Implementation
Suggestion Props
SuggestionList Props

Common Examples

To use a single Suggestion, pass a required label and handle selection with onPress. Supply the label already localized; the component renders it verbatim.

import { Suggestion } from "@servicetitan/anvil2-ai-kit";

function ExampleComponent() {
  return (
    <Suggestion
      label="Show overdue invoices"
      onPress={() => sendPrompt("Show overdue invoices")}
    />
  );
}

Suggestion list

Use SuggestionList for a wrapping group of chips. Each string in suggestions becomes a Suggestion. onSelect receives the selected string and index.The list does not enforce content limits. Keep the set to three suggestions of about 40 characters each.

Wrapping

Suggestions wrap to new lines when the container runs out of space.

Disabled

Set isDisabled on a single Suggestion to block selection.

Internationalization

Suggestion labels are consumer content and must be localized before they are passed to the component. SuggestionList uses ai-kit.suggestionList.label for its default group name. Pass aria-label to override it, or mount AiKitIntlProvider inside CartoTheme to override the message globally.

<AiKitIntlProvider
  messages={{
    "ai-kit.suggestionList.label": "Suggested next steps",
  }}
>
  <SuggestionList
    suggestions={["Show overdue invoices"]}
    onSelect={sendPrompt}
  />
</AiKitIntlProvider>

React Accessibility

Suggestion uses its visible label as its accessible name.
SuggestionList exposes its chips as one role="group" named by a localized label.
Users activate a focused suggestion with Enter or Space.

<Suggestion
  label="Show overdue invoices"
  onPress={() => sendPrompt("Show overdue invoices")}
/>

`Suggestion` Props

The Suggestion accepts the following props and forwards remaining React Aria Button props except children, className, style, and isPending.

string

required

Visible text and accessible name. Supply a short, localized follow-up prompt.

string

Class merged onto the chip.

boolean

Disables selection.

(e: PressEvent) => void

Handles selection for click, touch, and keyboard activation.

<SuggestionList
  suggestions={["Show overdue invoices", "Summarize recent jobs"]}
  onSelect={(suggestion, index) => sendPrompt(suggestion)}
/>

`SuggestionList` Props

The SuggestionList accepts the following props and forwards remaining <div> attributes except children, the DOM onSelect event, and style.

(suggestion: string, index: number) => void

required

Called when a suggestion is selected. The consumer owns inserting the text and dismissing the list.

string[]

required

Suggestions to render in order. Each string is both the visible label and the selection payload.

string

Accessible name for the suggestion group. When omitted, the component uses the localized ai-kit.suggestionList.label message.

string

Class merged onto the list container.

Concepts & Guidelines

Anvil2

Resources

Suggestion - Web

Options

List of Suggestions

Disabled

Behavior

Visual States

Wrapping

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Code

Common Examples

Suggestion list

Wrapping

Disabled

Internationalization

React Accessibility

`Suggestion` Props

`SuggestionList` Props

​Options

​List of Suggestions

​Disabled

​Behavior

​Visual States

​Wrapping

​Usage Guidelines

​When to Use

​When not to use

​Keyboard Interaction

​Code

​Common Examples

​Suggestion list

​Wrapping

​Disabled

​Internationalization

​React Accessibility

​Suggestion Props

​SuggestionList Props

Options

List of Suggestions

Disabled

Behavior

Visual States

Wrapping

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Code

Common Examples

Suggestion list

Wrapping

Disabled

Internationalization

React Accessibility

`Suggestion` Props

`SuggestionList` Props