Suggestion

Prompt suggestion chips that seed the next message — a real <ul> of <button>s, meant to sit above or below Composer.

Examples

Basic

A short list of starter prompts.

Usage

<Suggestion>
  <SuggestionItem onSelect={setValue}>Summarise the latest release notes</SuggestionItem>
  <SuggestionItem onSelect={setValue}>Explain this TypeScript error</SuggestionItem>
</Suggestion>

With Composer

Selecting a chip fills the composer — the usual empty-state pattern for chat UIs.

Usage

<Suggestion>
  {prompts.map((prompt) => (
    <SuggestionItem key={prompt} onSelect={setValue}>{prompt}</SuggestionItem>
  ))}
</Suggestion>
<Composer value={value} onValueChange={setValue} … />

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

Unstyled

Same component — Kernel look stripped. See Platforms.

disabled

label

Usage

<Suggestion>
  <SuggestionItem onSelect={…}>Summarise the latest release notes</SuggestionItem>
  <SuggestionItem onSelect={…}>Explain this TypeScript error</SuggestionItem>
</Suggestion>

<kernel-suggestion>
  <kernel-suggestion-item>Summarise the latest release notes</kernel-suggestion-item>
  <kernel-suggestion-item>Explain this TypeScript error</kernel-suggestion-item>
</kernel-suggestion>

Props

Props for Suggestion.
Prop	Type	Default
`label`	string	"Suggestions"
`disabled`	boolean	false
`children`	ReactNode (SuggestionItem)	—

Props for SuggestionItem.
Prop	Type	Default
`value`	string	button text
`onSelect`	(value: string) => void	—
`disabled`	boolean	false
`children`	ReactNode (required)	—

Accessibility

The list exposes an accessible name via label (aria-label on the <ul>).
Each chip is a real <button type="button"> — Tab reaches it, Enter/Space activates it, no custom keyboard layer.
Disabling the list sets pointer-events: none and dims the group; individual items can also be disabled on their own.