Suggestion

A menu of commands that opens above a chat input, like the list a slash brings up.

Render the input from children and call onTrigger to open the menu, here when the reader types a slash.

Give an item children to open a second column from it, and read the chosen value in onSelect.

Set block to make the menu as wide as the input below it.

Pass items a function and hand onTrigger the typed text, so the menu narrows as the reader types.

A menu with more items than fit scrolls inside its own height, and the arrow keys still move through every item.

The component inside real screens, with the components it usually sits beside.

A document editor with an AI input below the draft, where a slash opens commands to rewrite, shorten or change the tone.

A team chat channel where typing @ in the message box opens a list of teammates with their photo and team.

A command palette with a search field that lists actions and their shortcut keys, narrowing as the user types.

On This Page