Material.io - Text Fields

Filled text

Hint text

Outlined text

Your Name

Textarea - Filled

Textarea - Outlined

Text field without label - Filled

Text field without label - Outlined

Textarea

Disabled text field

Disabled text field

Text field with helper text

My Label

Text field with character counter

My Label

0 / 10

Multi-line text field (textarea) with character counter

Textarea Label

0 / 140

Alternative

Textarea Label 0 / 140

Text field with prefix and suffix text

Currency Value $ .00

HTML5 validation

Password

Pre-filled

Label in correct place

Baseline alignment

Text that is aligned with the text field's value

Text that is aligned to the bottom of the text field's outline