Suffixes can also be active widget. It can be an icon button that toggles visibility of the password. Just remember that adding interactive suffixes is not a common design pattern and your suffix has to have clear meaning to the user.
<anypoint-input type="password" name="ex3">
<anypoint-button slot="suffix" aria-label="Activate the button to show the password" onclick="this.parentNode.type='text'">Show</anypoint-button>
When invalid it renders error message defined as invalidmessage property.
The element also has preventInvalidInput and allowedPattern properties that, when both set, cancels any input that does not matches allowedPattern.
Remember to use this properties carefully as this is very invasive behavior.
The form-associated custom elements allows to associate a custom element with a <form> element. Original custom elements spec does not allow this.
The form-associated custom elements may not be supported in some browsers so custom form elements may be required to be used (for example iron-form).
The element supports this API in browser that has this API implemented. This means that the element behaves like a regular <input> element when inserted into the form element.
The element is a11y ready.
To comply with Web Content Accessibility Guidelines (WCAG) add name attribute to the input and add the label as a child.
When using prefixes or suffixes describe the meaning to screen reader by using aria-label property. Note, by setting aria-label, the screen reader will skip reading text value of the element.
<label slot="label">Amount to transfer</label>
<span slot="prefix" aria-label="Value in US dollars">lt;/span>
git clone https://github.com/anypoint-web-components/anypoint-input