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

Textfield box

Must be at least 8 characters

Textfield - 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 textfields. This demo achieves that by adding a custom class name: custom-textfield-input and setting some style:
.custom-textfield-input {
  width: 300px;

CSS Only Textfield

CSS Only Textfield box

Preventing FOUC


CSS Only Textarea

Full-Width Textfield and Textarea