Filled form inputs

Second option of material design inputs - a so called filled form controls. Filled text fields have more visual emphasis than outlined text fields, making them stand out when surrounded by other content and components. Both types of text fields provide the same functionality, so the type of text field you use can depend on style alone. Choose the type that: 1) Works best with your app’s visual style; 2) Best accommodates the goals of your UI; 3) Is most distinct from other components (like buttons) and surrounding content.

Basic inputs
This is a static text
Basic selects
Basic file inputs
Form helpers
Left aligned helper
Centered helper
Right aligned helper
Left aligned badge
Centered badge
Right aligned badge
Left aligned badge
Centered badge
Right aligned badge
Inline text helper
Inline badge helper
Input icons
Validation states
Valid state helper
Invalid state helper
Text options
Other text options work as well
Field options
Available in 12 columns sizes since it's based on 12 columns grid
Sizing options
Type options
Using input type="datetime-local"
Using input type="date"
Using input type="month"
Using input type="time"
Using input type="week"
Using input type="number"
Using input type="email"
Using input type="url"
Using input type="search"
Using input type="tel"
Using input type="color"
Using input type="range"