Form Components

Inputs with icon prefixes

account_box
email
phone
room

Icon prefixes with floating labels

account_box
email
phone
room

Icon prefixes with button suffix

account_box
email
phone
room

Toggle

A toggle switch is used as an on/off control.

Primary Accent Warn
Checked
Disabled

Character count

This demonstrates using Angular for a live character count within an input and textarea.

{{characterCountInputHintExample.value.length}} / 100
{{characterCountTextareaHintExample.value.length}} / 100

Input File Upload

Material Date Picker

Datepicker touch UI

Datepicker open method

Autocomplete

Reactive length: {{ reactiveStates.length }}
Reactive value: {{ stateCtrl.value | json }}

Reactive dirty: {{ stateCtrl.dirty }}

Template-driven value (currentState): {{ currentState }}

{{ state.name }} ({{state.code}}) {{ state.name }}

Input Mask

Model value: {{myModel || "[empty]"}}
Model value: {{modelWithValue || "[empty]"}}
Model value: {{formControlInput.value || "[empty]"}}