Command

kai-command

A grouped, filterable command palette — feed it a flat list of items and it buckets them under section headers, filters on every keystroke, and handles arrow-key navigation. The backbone of an @-mention picker or a slash-command menu.

• Shadow DOM
• Grouped + filterable
• Full keyboard nav
• role: listbox

Preview

When to use

Reach for it when the user needs to pick one thing out of many, fast — an @-mention picker that surfaces files, chats, and people; a slash-command menu inside the composer; a quick-switcher for models or threads. It owns the search input, the grouping, and the keyboard loop. For a static action list that’s already on screen, a plain Menu is lighter; to wire this into a rich text input, pair it with the Composer.

Usage

Set items as a JS property — a flat array, not an attribute. Each item needs an id (echoed back in kai-select) and a label; add a group to bucket it under a section header, an icon, and a description for a muted second line. The element groups, filters, and navigates for you; listen for kai-select to learn which id was picked, and kai-query-change if you want to drive your own async filtering.

<kai-command placeholder="Search files, chats, people…"></kai-command>
<script type="module">
  import '@kitn.ai/ui/elements';
  const el = document.querySelector('kai-command');
  // Array prop — set in JS, never as an HTML attribute.
  el.items = [
    { id: 'screen9', label: 'screen9.py', icon: 'file-text', description: '/Users/rob/screen9.py', group: 'Files' },
    { id: 'rs', label: 'Record screen', icon: 'message-circle', group: 'Chats' },
  ];
  el.addEventListener('kai-select', (e) => console.log('picked', e.detail.id));
  el.addEventListener('kai-query-change', (e) => console.log('query', e.detail.value));
</script>

Examples

Mention picker

The classic @-mention surface — items grouped across Mac apps, Chats, and Files, each with an icon and a path or subtitle. Type to filter across every group at once.

Code

Slash commands

A command menu of actions bucketed into Actions and Settings. Drop the description and each row is a single tidy line.

Code

Ungrouped

Omit group on every item and the palette renders one flat, unsectioned list — handy for a short quick-switcher like a model picker.

Code

Props

Property	Type	Default	Notes
items	{ … }[]	—	Flat list of items. Set as a JS property — not an HTML attribute.
placeholder	string	—	Placeholder text for the search input.
emptyLabel	string	—	Label shown when no items match the current query.

Events

Event	Detail	Notes
kai-active-change	{ … }	Fired when the highlighted/active item changes — via Arrow keys or when filtering re-clamps the active row. `id` is the newly active item's id, or `undefined` when no item is active (e.g. the filtered list is empty). Lets a host preview the active item without committing a selection.
kai-query-change	{ … }	Fired on every keystroke in the search input.
kai-select	{ … }	Fired when the user selects an item (click or Enter).

Composed from

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

CommandList

---

Need a hand? Report a bug Ask for help