Basic
Company (disabled)
First name Long last name that will be truncated

Address Address 2

City State Postal code mode_edit {{postalCode.value.length}} / 5
Error messages

Regular

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

With hint

Example This field is required Please type something here

Inside a form

Example This field is required

With a custom error function

Example This field is required
Prefix + Suffix

Text

Amount .00

Icons

Amount attach_money mode_edit

Icon buttons

Amount
Divider Colors

Input

Default color Accent color Warn color

Textarea

Default color Accent color Warn color

With error

Default color This field is required Accent color This field is required Warn color This field is required
Hints

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 field Required field

100% width label

Character count (100 max) {{input.value.length}} / 100

Show hint label

I favorite bold label I also home italic 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 Float Always Float Never Float

Label

What is your favorite color?

Prefixed

Example: 
Suffixed .00 €
Both: Email address email   @gmail.com

Empty:

Number Inputs
Table
{{i+1}} Value {{item.value}}
Forms Reactive Template
Delayed value
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>

Regular <textarea> with maxRows and minRows

 

<textarea> with mat-form-field

Autosized textarea

<textarea> with ngModel

<textarea> with bindable autosize

Autosize enabled
Appearance Legacy appearance This field is required Please type something here Standard appearance This field is required Please type something here Fill appearance This field is required Please type something here Outline appearance This field is required Please type something here
Legacy appearance This field is required Please type something here Standard appearance This field is required Please type something here Fill appearance This field is required Please type something here Outline appearance This field is required Please type something here
Autofill
Use custom autofill style Autofill monitored is autofilled? {{isAutofilled ? 'yes' : 'no'}}
Outline form field in a tab Tab 1 input Tab 2 input