# 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:

```css
[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`):

```css
[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:

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