Single line text fields do not float their label on focus or with data.
Use a counter prop to inform a user of the character
limit. The counter does not perform any validation by itself. You
will need to pair it with either the internal validation system,
or a 3rd party library. You can use it on regular, box or outlined
text fields.
A password input can be used with an appended icon and callback to control the visibility.
When clearable, you can customize the clear icon with
clear-icon.
When hide-details is set to
auto messages will be rendered only if there's a
message (hint, error message, counter value etc) to display.
You can optionally change a text field into any color in the Material design palette. Below is an example implementation of a custom form with validation.