Autocompletion
1. What does the component do?
- It helps the user with entry by providing suggestions.
2. When should the component be used?
- When an entry field can have lots of pre-defined values.
- As a tool for previewing search results/fields.
3. Rules
- The auto-completion always has a label.
- Optional entries include the text ‘(optional)’ behind the label text. The text ‘(optional)’ can be shortened to ‘(opt.)’ in short fields.
- A question mark in the circle – in addition to the label – can be used for detailed explanations. A tooltip opens if this question mark is clicked on.
- During entry three suggestions appear (usually after three symbols but this can be modified on a project-specific basis).
- The listed entries can be scrolled through using arrow keys and accepted with ‘Enter’.
- A maximum of ten suggestions are shown.
- The auto-completion selection closes when an element is chosen.
4. Variants and statuses
The component has the following statuses:
- Default
- Hover
- Active
4.1 Standard
Design specification
Code specification
4.2 With hit display
As an option to the standard variant, this variant can be used when an auto-completion list always contains more than the maximum ten hits shown.
Design specification
Code specification
4.3 With static entries
