Adding hint to TextField

16,337

Built-in feature

After some research I found that this is an integrated feature in all of the input controls (TextField, TextArea, DateField, ComboBox).

Vaadin Flow (Vaadin 10)

The feature is a property called Placeholder.

You can optionally pass the placeholder text to the constructor of TextField, along with optional initial value.

new TextField( "label goes here" , "hint goes here" ) 

Or call the setter and getter: TextField::setPlaceholder and TextField.getPlaceholder.

myTextField.setPlaceholder( "Hint goes here" ) ;

Vaadin 8

The feature is a property called Placeholder.

Call the getter/setter methods: TextField::getPlaceholder and TextField.setPlaceholder.

myTextField.setPlaceholder( "Hint goes here" ) ;

Vaadin 7

The feature is a property called InputPrompt.

Call the getter/setter methods: TextField::setInputPrompt and TextField::getInputPrompt.

myTextField.setInputPrompt("Hint goes here"); 
Share:
16,337
AndroidHustle
Author by

AndroidHustle

I'm an IxD by the University of Umeå Sweden. I love working with UI design and UX planning. Now: UX lead for the Android channel at Fintech company Avanza Former: User Experience Designer at inUse Experience Former: Interaction designer at Sony Mobile. Former: Lead interaction designer at Rebtel. Former: Software developer/Interaction designer at Giesecke & Devrient.

Updated on June 04, 2022

Comments

  • AndroidHustle
    AndroidHustle almost 2 years

    I want to add a TextField with an integrated hint text, a user prompt, a placeholder until the user enters text. The prompt text disappears when the TextField is focused and re-appears if the TextField loses focus and no text is entered.

    I initially thought that this would be a generic feature for Vaadin TextFields but that doesn't seem to be the case. Now I'm looking for a way to implement my own extension of the TextField to add this feature. But I'm stuck.

    My question is if anyone here has done this before or instinctively know how it should be done?

    This is how far I've come:

    package com.smarttrust.m2m.gui.admin;
    
    import com.vaadin.event.FieldEvents.FocusEvent;
    import com.vaadin.event.FieldEvents.FocusListener;
    import com.vaadin.terminal.gwt.client.ui.VCalendarPanel.FocusChangeListener;
    import com.vaadin.ui.TextField;
    
    public class M2MHintTextField extends TextField implements FocusListener    {
    
        private final String hint;
    
        FocusListener listener = new FocusListener() {
    
            @Override
            public void focus(FocusEvent event) {
                // TODO Auto-generated method stub
    
            }
        };
    
        public M2MHintTextField(final String hint)    {
            super(hint);
            this.hint = hint;
            super.addListener(this.listener);
        }
    
        @Override
        public void focus(FocusEvent event) {
            // TODO Auto-generated method stub
    
        }
    }
    
  • cyclical
    cyclical over 8 years
    Weird. This is not available for me in my environment. Running Java7EE. ** sorry, must be vaadin.
  • Basil Bourque
    Basil Bourque almost 6 years
    @cyclical The property name changed between versions of Vaadin. Perhaps that change bit you.