RhombusKit

Selection List

A selection list shows a set of options as an always-visible list the user can select from — or, in action mode, a list of buttons that run a command. RhombusKit's <rhombus-selection-list> wraps Material's <mat-selection-list> (an ARIA listbox) and <mat-action-list>, routing every colour through the token contract.

Example

Toppings
Cheese
MushroomFresh cremini
Olive
Pepper
Anchovy

When to use

  • For multi-select from a visible list where every option should be on screen at once (no dropdown).
  • For a single-select list that stays expanded, when a Radio group's styling doesn't fit.
  • In action mode, for a menu-like column of commands (edit, duplicate, delete) that aren't navigation.

When not to use

  • For navigation (links to routes/URLs), use a Nav List — a listbox can't hold interactive children like anchors, so the two stay separate.
  • When space is tight and the options can collapse, use a Select dropdown instead.
  • For a short set of exclusive choices, a Radio group is more compact.

Related components

  • Nav List — navigation links, not form selection.
  • Select — the same choice, collapsed into a dropdown.
  • Checkbox — a single multi-select input.
  • Menu — a triggered floating command list.

Was this page helpful?