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
Text (always outline)
Amount$ .00
Icons
Amountcalendar_todaymode_edit
Icon buttons
Amount
FillOutline
Divider 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:{{requiredField ? 'Required field' : 'Not required field'}}
Check to hide the required marker:
{{hideRequiredMarker ? 'Required Without Marker' : 'Required With Marker'}}
Auto FloatAlways 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 floatLabel w/ placeholder
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
AppearanceFill appearanceThis field is requiredPlease type something hereOutline appearanceThis field is requiredPlease type something here
Fill appearanceThis field is requiredPlease type something here
Outline appearanceThis field is requiredPlease type something here
AutocompletePick Number{{option}}Pick Number{{option}}Outline form field in a tabTab 1 inputAmount$ .00Tab 2 inputAmount$ ! .00BaselineShifted textLabelExamples