Examples

Components Inputs Input Select

Overview API Examples Style Tokens

Basic usage

Negative mode

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

Prefilled value

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

Sizes

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

Shapes

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

Displaying a hint

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

Displaying an alert

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

Displaying an error

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

Custom option content

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

Multiple selection

You can add an alert to be displayed below the Input Select.The Input Select 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.

Contextual actions

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

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 Select component supports a Read-only state, which makes the field unmodifiable but still focusable.

Disabled state

The Input Select 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 Select component automatically handles its error state and displays a “(required)” marker in the label, that you can customize or hide following your needs.