Example text in text input field should disappear when field is activated by user

[petterill]

To which feature the request relates to

What is the component/pattern/token/documentation your request is related to?
HDS text input field component

What

What are you proposing? Be as precise as possible.
The gray example text input in the text input field should disappear when the input field is activated by the user.

Why

Why is this new feature needed? How is it better than the current version?
The text input field has a grayed out text where an example input can be indicated. We did some user testing where we used this component and the user was confused with the grayed out text being there in the text input field and tried to delete the text and was frustrated when they could not erase the example text. The user did not understand that the gray text indicated an example input.

Related material

Optionally, you may attach screenshots, Sketch files etc. to make your request more understandable. Also, you may provide links to similar content in other design systems.

[ronijaakkola]

This is problem is partly caused by the high contrast requirement that WCAG sets for the placeholder text. The contrast is so high that for some users the input easily looks like it has been already filled.

To not only rely on the text color, HDS also uses "E.g." placeholder prefix in its form examples. This way it should be clearer to the user that the text is indeed a placeholder. I think an example of this prefix is missing from the text input documentation page so we need to fix that.

As @minevala pointed out in another discussion, the native HTML input does not hide the placeholder on activated input either. So this requires some customisation to the input to make it work differently.

[laurakarhu]

We are looking for options to improve placeholder so that it would still be clear for the users that it is an example.