How to build an accessible PromptSuggestions in React

A named group of real buttons whose names are the prompt text, operable with Tab and Enter/Space. Pills meet the coarse-pointer target size and keep a visible focus ring

When to use a PromptSuggestions

• An empty conversation: offer a few concrete things to ask
• Follow-up suggestions under an assistant reply

When not to use it

• Filtering or selecting values — use ToggleGroup, Tag or SegmentedControl
• Autocomplete while typing — use Combobox

Keyboard interactions

Role group, verified at WCAG 2.2-AA.

• Tab
• Enter
• Space

Common mistakes

Avoid: Ten generic prompts ("Ask me anything")

Prefer: Three or four specific, tappable prompts

Specific starters show what the assistant can actually do; a long generic list is skipped

Example

<PromptSuggestions
  items={['Summarise this week’s tickets', 'Draft a release note', 'What changed in v2?']}
  onSelect={() => {}}
/>

See the full PromptSuggestions reference →