When to use
Section titled “When to use”- In fields where the user types free text but common values can be suggested: city, bank name, product name, search.
When not to use
Section titled “When not to use”- When the value must come from a list: use Combobox or Select.
- When there are no suggestions: use TextInput or SearchInput.
Anatomy
Section titled “Anatomy”- Label: the Field label.
- Input: the text field, with an optional clear button.
- List: the suggestions that match the text.
Behaviour
Section titled “Behaviour”- Typing opens the list and filters the suggestions in the Provider language, ignoring case; “i” and “İ” follow the Turkish rule.
- Choosing a suggestion writes it into the field; the user can also leave text that is not in the list.
- While
loading, a loading row shows and the suggestions are not filtered again; pass server results as they are. limitcaps the number of suggestions shown.
Guidelines
Section titled “Guidelines”- Keep suggestions short; put the most common values first.
- Where a choice from the list is required, use Combobox instead.
Content
Section titled “Content”- The label names the field; the placeholder is an example or an instruction.
emptyTexttells the user they can keep typing: “No suggestions”.
Related components
Section titled “Related components”- Combobox: a choice from the list is required.
- SearchInput: search without suggestions.
- TextInput: free text.