Discussion for hover styling on these components can be found here: #2632

After having some feedback on this issue recently we have decided to look into creating hover states for the form components. Right now we see no reason to not implement hover.

We tried to design hover states with a simple ruleset. Every hover state should have an extra visible border on hover and a color change. Our first attempt was not successful in our opinion. Giving buttons extra width and height on hover breaks conventions and looks like it is being pressed. We are not saying there no way of designing good visible hover that goes beyond just color. But it need to be done properly if we are going outside of what is the most common way of designing hover.

Our proposal at this time is to create good hover states for our form components (inputs) and leave everything else as is for now. We dont want to create something new that is not well researched.

Proposed components that need hover states

In this issue we decided to only work with form components. We will keep working and researching if only color change on components are enough as a hover state for certain users. We do not have enough data to break conventions at this time.

Color change

Most of our form components use neutral-border-default as their normal state. If we want to have a color change on hover. The natural thing to do is to use neutral-border-strong. We need to figure out if this will cause problems for users that have changed their border colors to fit their theme.

For active components like checkbox, switch and radio we can use base-hover as hover color

Thicker border

Every form component have a border. Using only a minimal color change seems like a small hover state. To give our components more affordance when using a pointer we could add a 1px border to our input components.

When using only color change it looks like this:

I propose we look into if its possible to add a border when hovering. But we need to be certain that it dont make the component "jump" or push other content. If we decide to not change the border we need to use an even darker border color then strong. With only one px border

Summary

I am proposing to add a hover state on all our form components. The hover state will use border-strong and add 1px to the border. Test it in this Figma prototype (A little glitchy but you get the point)

Skjermopptak.2025-10-01.kl.16.42.36.mov

Discussion tasks

• Can we implement an extra 1px border on hover without causing any problems?
• Are we agreeing on the list of form components that should have hover

Implementation tasks

• Implement new variants in Figma
• Add hover states in code

Components we need to change

• textfield
• textarea
• radio
• checkbox
• switch
• suggestion/multisuggestion
• Select