Basic

mode_edit {{postalCode.value.length}} / 5
Error messages

Regular

This field is required This field is required Please enter a valid email address

With hint

This field is required Please type something here

Inside a form

This field is required

With a custom error function

This field is required
Prefix + Suffix

Text

.00

Icons

attach_money mode_edit

Icon buttons

Divider Colors

Input

Textarea

With error

This field is required This field is required This field is required
Hints

Input

{{characterCountInputHintExample.value.length}} / 100

Textarea

{{characterCountTextareaHintExample.value.length}} / 100

Hello  , how are you?

{{input.value.length}} / 100

I favorite bold placeholder I also home italic hint labels

{{hintLabelWithCharCount.value.length}}

Enter some text to count how many characters are in it. The character count is shown on the right. Length: {{longHint.value.length}}

Check to change the color:

Check to make required:

Check to hide the required marker:

Auto Float Always Float Never Float

Example: 
.00 €
Both: email   @gmail.com

Empty:

Number Inputs
Table
{{i+1}} {{item.value}}
Forms
Floating labels
Only label Label and placeholder Always float Never float Label and placeholder element The placeholder element
Value Value Only label Value Label and placeholder Value Always float Value Never float Value Label and placeholder element The placeholder element Value
Textarea Autosize

Regular <textarea>

<textarea> with mat-form-field

<textarea> with ngModel