Autocomplete

An autocomplete is a text field that filters a list of suggestions as the user types. RhombusKit's <rhombus-autocomplete> wraps Material's <mat-autocomplete> in the same form-field shell as input and select, and routes its panel colour through the token contract so it re-skins with the active theme. It is free-text by default, so the field accepts a typed value even when nothing matches.

Example

10 results available

When to use

  • When there are too many options to scroll a select comfortably, and filtering by typing is faster.
  • For server-backed search — set [filterWith]="null" and refetch from (queryChange).
  • When the user may enter a value not on the list (free text), which the default requireSelection=false allows.

When not to use

  • For a short, fixed list of choices, use a Select — no typing needed.
  • For unconstrained free text with no suggestions, use an Input.
  • To build a set of tags/tokens from free text, use Tag Input.

Related components

  • Select — a fixed-list dropdown, no type-ahead.
  • Input — free text with no suggestion list.
  • Tag Input — build a list of tokens from free text.

Was this page helpful?