User interaction

Creating responsive user interactions is important because users expect immediate feedback when they hover over buttons, click links, or focus on input fields.

Without these visual cues, people can feel confused about whether something is actually clickable or if their actions are even working.

On top of that, interaction states are crucial for accessibility since keyboard users rely on focus indicators to know where they are on the page. When you add these interactive styles, you’re not just making things look nicer, you’re also making your site more inclusive and easier to navigate for everyone.

We’ve already seen one way that we can create styles to highlight user interactions, which was using :hover and :focus-visible.

Because pseudo-classes deal with the state of elements, they are idea for helping us deal with user interaction!

One type of element that a lot of users interact with are forms.

<input> elements have a default outline on them for when they gain focus, which is great, but nothing is more frustrating than submitting a form and only then realizing you made some mistakes in filling it out, and we can use a little bit of CSS to help users out.

You should always perform server-side validation on forms, but it’s nice to let the user know there is a mistake even before you do that!

Here’s a list of most of the ones you’d use on a form (you can find a full list here):

:focus-visible { ... }
:focus-within { ... }
:valid { ... }
:invalid { ... }
:user-valid { ... }
:user-invalid { ... }
:checked { ... }
:required { ... }
:optional { ... }

For these to work, we do need to make sure we are using the correct type attribute on our <input> elements.

We can also add extra attributes, such as required, minlenght, and pattern as well.