SuggestionChips
StableA row of ready-made questions a person can pick.
Also known as suggestions, suggested prompts, quick replies, prompt starters
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Pick a prompt
Nothing picked yet.
const [picked, setPicked] = useState<string | null>(null);
<SuggestionChips
suggestions={["Summarise this report", "Draft a reply", "List open questions"]}
onPick={setPicked}
/>It does not remember the choice. Here the demo keeps it.
When to use it
Gives a person a ready-made next step instead of a blank box. Each suggestion is a short button holding the exact words.
Made of: List · Suggestion
Use it for
- An empty chat, to show what the assistant can do.
- After a reply, to offer likely follow-up questions.
Not for
- A whole first screen with starting ideas and what the assistant can do: use StarterGallery.
- Showing what the chat is about: use ContextChip.
- Picking one setting from a few options: use SegmentedControl.
Do and avoid
Do
- Offer three to five suggestions, worded the way the person would say them.
- Make each one a complete request that makes sense on its own.
- Change them as the conversation moves on.
Avoid
- Do not show suggestions while a reply is still appearing. They compete with it.
- Do not repeat the same suggestion twice.
- Do not use long sentences. A paragraph inside a small button is hard to read.
On a phone
- Chips wrap onto new rows instead of scrolling sideways.
- Each chip keeps its size and has a 44px tap area on touch screens.
- A tap calls onPick, and no part of it needs hover.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| suggestionsrequired | string[] | none | Prompt texts to show. Each string is also used as its key, so keep them unique. |
| onPickrequired | (s: string) => void | none | Called with the chosen suggestion. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- hover
- A chip gets a stronger border and a soft background under the pointer.
- focus
- A visible focus ring appears on a chip when you reach it with the keyboard.
- empty
- Pass an empty suggestions array and no chips are shown.
Tokens
Change one of these and every part that uses it follows.
--border--border-strong--surface--surface-sunken--fg-muted--fg--radius-control
Built in
- The list is named "Suggested prompts", and screen readers hear how many suggestions there are.
- Each suggestion is a real button that reads its own words.
- The Tab key reaches each suggestion, and Enter or Space picks it.
What you need to do
- Move the keyboard to the message box, or wherever fits, after a pick.
- Give every suggestion different words. They are told apart only by their words.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide