Basic
Company (disabled)
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

Text (always outline)

Amount .00

Icons

Amount calendar_today mode_edit

Icon buttons

Amount

Fill Outline

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: {{requiredField ? 'Required field' : 'Not required field'}}

Check to hide the required marker: {{hideRequiredMarker ? 'Required Without Marker' : 'Required With Marker'}}

Auto Float Always 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 Label 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
Appearance Fill appearance This field is required Please type something here Outline 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
Primary Accent Warn
Autofill
Use custom autofill style Autofill monitored is autofilled? {{isAutofilled ? 'yes' : 'no'}}
Textarea form-fields Label Label

Disable textarea form-fields

Appearance toggle Label

Fill Outline

Autocomplete Pick Number {{option}} Pick Number {{option}} Outline form field in a tab Tab 1 input Amount .00 Tab 2 input Amount .00 Baseline Shifted text Label Examples

Custom control

Phone number phone Include area code

Label

Label