Examples

Components Inputs Input Autocomplete

Overview API Examples Style Tokens

Basic usage

Negative mode

The Input Autocomplete component supports a negative mode, suitable for areas with dark background.

Prefilled value

You can initialize the Input Autocomplete component with a prefilled value.

Sizes

The Input Autocomplete component comes with two built-in sizes: comfortable and compact.

Shapes

The Input Autocomplete component comes with two built-in shapes: squared and rounded.

Displaying a hint

You can add a hint to be displayed below the Input Autocomplete.

Displaying an alert

You can add an alert to be displayed below the Input Autocomplete.

Displaying an error

You can define your own validators and error messages to be applied to the Input Autocomplete.

Custom option content

The options displayed in the Input Autocomplete dropdown can be customized following your needs.

Multiple selection

The Input Autocomplete component supports both single and multiple selection modes.

Hiding the Clear button

You can hide the Clear button, which by default is displayed whenever the field is not empty.

Adding the current value as an option

You can let your users add their own custom value, if they don’t find what they are looking for in the list.

Contextual actions

It is possible to add custom contextual actions both on the start edge and on the end edge of the Input Autocomplete.

Language

If your use case requires the user to insert a text in a specific language, you can make it clear by specifying the language as a parameter that is displayed after the label.

Placeholder

You can set a custom placeholder to be displayed whenever the field is empty.

Read-only state

The Input Autocomplete component supports a Read-only state, which makes the field unmodifiable but still focusable.

Disabled state

The Input Autocomplete component supports a Disabled state, complete with an information button with which you can provide useful details as to why the field is not operable.

Required state

If you mark your FormControl as required, the Input Autocomplete component automatically handles its error state and displays a “(required)” marker in the label, that you can customize or hide following your needs.