Inline labels ('ghosting') for Text Inputs

Chris Rice shared this idea 5 years ago
Under Consideration

Would it be possible to add an option in the Properties of the Text Input Widget to display the label or ID inside the field itself at 50% opacity, then remove it as soon as a user clicks on the input field? I know it's possible to do today, but you end up having to create a Text Input field, then another 'label' on top of the field and put a bunch of logic to hide the label (and show it again when the user leaves the field blank).

Comments (1)

photo
1

You can do it with just one Text input and events. Set the transparency of the input to 50% and then create two events. One is a change style on the input to change the transparency level. The other is a set value on the input and let it to empty. Those two actions can be defined in an on focus in event. Then, you can do the opposite events related to an on focus out event.