Suggestions

kai-suggestions

Can sit above an empty thread or under a reply, in a row or a full-width stack.

• Shadow DOM
• 3 chip styles
• Block layout mode
• Substring highlight
• 1 event

Preview

When to use

Above an empty prompt input, or under the last reply as follow-ups. For a list the reader filters by typing, use Command.

Usage

Assign the suggestions property and listen for kai-select:

<kai-suggestions id="suggs" variant="outline"></kai-suggestions>
<script type="module">
  import '@kitn.ai/ui/web-components';

  await customElements.whenDefined('kai-suggestions');

  const suggs = document.getElementById('suggs');
  suggs.suggestions = ['Explain the architecture', 'Show me a code example'];
  suggs.addEventListener('kai-select', (e) => console.log(e.detail.value));
</script>

For the declarative path, use <kai-suggestion> children — value sets the emitted value, text content is the label. Prop items render first; declarative children are appended after.

Child element	Attributes	Text content	Notes
<kai-suggestion>	iconvalue	Yes	Parse a single `<kai-suggestion>` node into an `Item` descriptor.

Examples

Default (Outline Pills)

Code

Ghost Variant

variant="ghost" — no border, subtle hover. Good when chips should blend into the surrounding UI.

Code

Block Layout

block stacks suggestions as full-width rows — useful in sidebars or constrained panels.

Code

With Highlighted Search

highlight emphasises the matching substring in every chip — ideal for autocomplete or search-suggestion lists.

Code

Small Chips

Code

Label and Value Differ

Pass { label, value } objects when the displayed text and the emitted value should differ.

Code

Props

Property	Type	Default	Notes
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
suggestions	(string | { … })[]	[]	The suggestions: strings, or `{ label, value }` when the displayed text and emitted value differ. JS property (array).
variant	"outline" | "ghost" | "default"	'outline'	Chip style. Defaults to `outline`.
size	"md" | "lg"	'md'	Row height for the list layout. Defaults to `md`; chips are unaffected.
layout	"chips" | "list"	'chips'	A wrapping row of pills (the default), or full-width rows with a leading icon.
block	boolean	false	Full-width left-aligned rows instead of pills.
highlight	string	—	Substring to highlight within each suggestion.

Events

Event	Detail	Notes
kai-select	{ … }	A suggestion was clicked.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

PromptSuggestion

---

Need a hand? Report a bug Ask for help