ExampleThis field is requiredEmail
This field is required
Please enter a valid email address
With hint
ExampleThis field is requiredPlease type something here
With a custom error function
ExampleThis field is requiredPrefix + Suffix
Text
Amount$ .00
Icons
Amountattach_moneymode_edit
Icon buttons
AmountDivider Colors
Input
Default colorAccent colorWarn color
Textarea
Default colorAccent colorWarn color
With error
Default colorThis field is requiredAccent colorThis field is requiredWarn colorThis field is requiredHints
Input
Character count (100 max)
{{characterCountInputHintExample.value.length}} / 100
Textarea
Character count (100 max)
{{characterCountTextareaHintExample.value.length}} / 100
Hello
First name,
how are you?
Disabled fieldRequired field
100% width label
Character count (100 max){{input.value.length}} / 100
Show hint label
I favoritebold label
I also homeitalic hint labels
Show hint label with character count{{hintLabelWithCharCount.value.length}}
Enter text to count
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 FloatAlways FloatNever Float
Label
What is your favorite color?
Prefixed
Example:
Suffixed.00 €
Both:
Email addressemail @gmail.com
Empty:
Number Inputs
Table
{{i+1}}
Value
{{item.value}}
FormsReactiveTemplate
Delayed value
Floating labels
Only labelLabel and placeholderAlways floatNever floatLabel and placeholder elementThe placeholder element
ValueValueOnly labelValueLabel and placeholderValueAlways floatValueNever floatValueLabel and placeholder elementThe placeholder elementValue
Textarea Autosize
Regular <textarea>
Regular <textarea> with maxRows and minRows
<textarea> with mat-form-field
Autosized textarea
<textarea> with ngModel
<textarea> with bindable autosize
Autosize enabled
AppearanceLegacy appearanceThis field is requiredPlease type something hereStandard appearanceThis field is requiredPlease type something hereFill appearanceThis field is requiredPlease type something hereOutline appearanceThis field is requiredPlease type something here
Legacy appearanceThis field is requiredPlease type something here
Standard appearanceThis field is requiredPlease type something here
Fill appearanceThis field is requiredPlease type something here
Outline appearanceThis field is requiredPlease type something here
AutofillOutline form field in a tabTab 1 inputTab 2 input