Styling input fields

Styling input fields is possible in various ways. Most - if not all - input fields in the LokiCheckout are actually driven by Alpine components - one Alpine component (aka LokiComponent) per input field. There are some caveats when styling things, which are discussed in this document.

About the pseudo classes :valid and :invalid

It is best to not rely upon the pseudo classes :valid and :invalid. These pseudo classes are not managed by the logic of LokiComponents, but purely the browser. And they often are applied without user interaction. For instance, you might consider using the following styling:

[data-type="field"]:invalid {
    border: 2px red solid;
}

[data-type="field"]:valid {
    border: 2px green solid;
}

Any input that is valid will render green. Any input that is required will render red. And this is even the case when the user has not interacted with the form yet! And this leads to an unfriendly experience.

Styling invalid fields with aria-invalid

A better way is to render invalid fields using the aria-invalid attribute. This attribute is set via the Alpine component and only when the value is deemed invalid (valid = false) and submitted (submitted = true):

[data-type="field"][aria-invalid] {
    border: 2px red solid;
}

Note that this is actual the default within the tailwind-source.css of the LokiCheckout.

Styling valid fields

Unfortunately, there is no aria-valid attribute. Even though setting aria-invalid to false would have the same effect, within Loki, it was chosen to actually remove the aria-invalid attribute whenever the value is valid again. In short, you can't use an ARIA attribute to style input fields that are valid and have been submitted.

However, for this specific purpose, we have added a data attribute data-valid that you can use as follows:

[data-type="field"][data-valid] {
    border: 2px green solid;
}