JS Active Field

Overview

The JS Active Field module is used to apply a modifier class, is-active, to .js-active-field elements whose child input or textarea element has focus and/or a nonempty value. The is-active class, in turn, is used to achieve styling that indicates to the user which form fields have either been filled out already, or are currently being filled out.

At the time of writing, this sort of dynamic styling isn't perfectly achieveable with pure CSS, which is why we must use JavaScript.

Examples

Basic Dynamic Label

While the application of style rules via the is-active class is entirely open, one particularly common pattern is implemented by form__item--dynamic-label, shown below.