Go to AntUIKit homepage

Suggestion

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

Preview in FigmaLLMs

Accessibility

What Suggestion does for you, and what it leaves to the input you render.

What Suggestion renders

Two parts: a box around the input you render, and a menu in a popup above it. Each column of the menu is a <ul> with role="menu", and each item is a <li> with role="menuitemcheckbox".
  • The input is yours, so its label is yours too. A chat input with only a placeholder has no name once the reader starts typing: give it an aria-label or a visible label.
  • An item whose label is a string also gets it as a title. A label built from markup gets no title, so keep the words in the label rather than only in an icon.
  • icon is shown before the label. A glyph from the icon pack is hidden from screen readers, so the label has to say what the command does on its own.

Keyboard

Focus stays in your input the whole time. The menu takes its keys from the onKeyDown that children receives, so none of this works until you pass it to the input.
  • Up and Down move through the items, and wrap at the ends. The first item is active when the menu opens.
  • Right opens an item's children column and Left goes back, mirrored in a right-to-left layout.
  • Enter picks the active item. Escape closes the menu.
  • Tab is not handled: it leaves the input with the menu still open. If that matters in your layout, call onTrigger(false) from the input's onBlur.

What a screen reader is told

Your input carries no combobox attributes, so a screen reader is not told that a menu opened, or which item is active as the arrows move. A sighted keyboard user sees the highlight, and a screen reader user hears nothing until Enter.
  • children also receives open. Set aria-expanded on your input from it, and aria-haspopup="menu", so the reader knows a menu is there.
  • Tell the reader how to open it. A placeholder like “Type / for commands” works for sighted readers. Repeat it in an aria-describedby hint, since the placeholder goes away as soon as they type.
  • After a pick, the input's text changes. Write the chosen command into the text, like /summarize, so the result is readable in the input itself.

Contrast and size

The active row is marked with a light fill and bolder text. Check that the fill reads against the menu background in both light and dark mode, and with a custom theme.
  • The menu scrolls after about eight rows. A long list is hard to scan by ear as well as by eye, so filter it as the reader types.
  • Every color comes from the active theme. The Tokens tab lists the ones this component reads.
SourcesThink
© 2026 AntUIKit . All rights reserved.