Text Field
Note that in browsers that support custom properties, we alter theme's primary color when using the dark theme toggles so that the text fields appears more visible.

Full Functionality JS Component (Floating Label, Validation)

Password field with validation

Must be at least 8 characters long

Text Field box

Must be at least 8 characters

Text Field - Leading/Trailing icons

Note: Some implementations utilizing leading and trailing icons may wish to set a width on the input element to achieve uniform widths on text fields. This demo achieves that by adding a custom class name: custom-text-field-input and setting some style:
.custom-text-field-input {
  width: 300px;

CSS Only Text Field

CSS Only Text Field box

Preventing FOUC


CSS Only Textarea

Full-Width Text Field and Textarea