component autocomplete textbox form-element


Autocomplete helps users to select a single option on a large amount of data, by typing some characters as filter.


This example is populated by 50 random trivia questions.

c-autocomplete with-empty-results

Sometimes you don't know what to type. In this example, when the autocomplete field is focused, the known data (or a subset) is shown to you. However you can also type for search.
In this example, you can find for Sunweb destinations in Dutch

c-autocomplete floats-from="sml" [xs,sm,sml]

The floating-box containing results is relatively positioned from the main text-box. However, on small devices, is shown fullscreen to let users focus on their decision. The breakpoint that divides those behaviours can be customized.

Special Data Types

c-autocomplete [data-type="destinations"]

Destinations are one of our main sources of data, so it deserves a better arrangement on results to help users go on vacations.

Live data

c-autocomplete live

Live autocomplete allows to perform a search through an API