Text inputs enable the user to interact with and input data.
We use them when the application requires long-form content from the user.
The icon could be positioned at right as well, unless the textbox is of type "password", in that case the icon will remain in the left, in order to have space for the icon to see/hide the password
The icon and the clear button are optional. Thus, you could use the component without them.
Textbox with info tooltip
Textbox with password requirement
The disabled state blocks the users interaction and modifies the appearance to let them know that edition is not possible.
In some cases, the textbox is not disabled at component level but instead one ancestor is marked as disabled. This is mainly done when loading data to let the users know that the component is not useful at that moment.
The success state let the user know that the filled information is correct.
The warning state let the user know that the filled information has an issue.
The error state let the user know that the filled information has an error.
The highlighted modifier changes the color when an option is selected.
It is used in contexts when is useful to let the users know that an options is choosen (i.e. search filters or booking steps).