Input Text

Basic usage

Negative mode

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

Prefilled value

You can initialize the Input Text component with a prefilled value. By using the Input Text in Multiline version, you can make its content be displayed on multiple lines, and control its maximum height following your needs.

Sizes

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

Shapes

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

Displaying a hint

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

Displaying an alert

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

Displaying an error

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

Defining a maximum length

By adding a maxLength validator to your FormControl, you can activate a counter displayed below the Input Text and automatically updated whenever the user inserts or deletes a character.

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 Text.

Contextual icons

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

Contextual custom elements

It is possible to add contextual completely custom elements both on the start edge and on the end edge of the Input Text.

Language

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

Disabled state

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