Vaadin Text Field Examples

Learn to setup, style, and validate Vaadin text field control with these simple-to-follow code examples.

Table of Contents

1. Vaadin text field label
2. Vaadin text field width and height
3. Vaadin text field size limit
4. Vaadin text field focus
5. Vaadin text field change event listener
6. Vaadin text field empty validation
7. Vaadin text field number validation
8. Vaadin text field CSS styling

1. Vaadin text field label

You can set the label for a text field in two ways.

• Set text field label as constructor argument

  final TextField txtFldOne = new TextField("Type your name here:");

• Set text field label using setCaption() method

  final TextField txtFldOne = new TextField();
  
  //Set Text Field Label
  txtFldOne.setCaption("Type your name here:");
  

2. Setting Width and Height

To set the text field’s width and height, use setXXX methods.

final TextField txtFldOne = new TextField();
txtFldOne.setCaption("Field size example 1");

//Set width and height
txtFldOne.setWidth(300, Unit.PIXELS);
txtFldOne.setHeight(50, Unit.PIXELS);

layout.addComponents(txtFldOne);

//or

final TextField txtFldTwo = new TextField();
txtFldTwo.setCaption("Field size example 2");

txtFldTwo.setWidth("300px");
txtFldTwo.setHeight("50px");

layout.addComponents(txtFldTwo);

3. Setting Text Field Size and Limit

To set the maximum character limit in text field, use setMaxLength(int length) method.

final TextField txtFldOne = new TextField();
txtFldOne.setCaption("Field limit example");

txtFldOne.setMaxLength(10);

layout.addComponents(txtFldOne);

4. Setting Focus on Text Field

To bring the focus on the text field, use focus() method.

final TextField txtFldOne = new TextField();
txtFldOne.setCaption("Field focus example");

txtFldOne.focus();

layout.addComponents(txtFldOne);

5. Attach Event Listners on Text Fields

To handle any value change event in the text field, you can attach two event listeners.

• Value change event listener

  Value change events are fired when there is a value change in text field, and when it looses focus after editing. handle value change events with ValueChangeListener.

  final TextField txtFld = new TextField();
  txtFld.setCaption("Field value change listner example");
  
  txtFld.focus();
  txtFld.setInputPrompt("Enter any text");
  
  txtFld.addValueChangeListener(new Property.ValueChangeListener() 
  {
  	private static final long serialVersionUID = 5678485350989070188L;
  
  	public void valueChange(ValueChangeEvent event) 
  	{
          String value = (String) event.getProperty().getValue();
          // Do something with the value. I am showing a tray notification
          Notification.show("Value is: " + value, Type.TRAY_NOTIFICATION);
      }
  });
  //Fire value changes immediately when the field loses focus
  txtFld.setImmediate(true);
  
  layout.addComponents(txtFld);
  

• Text change event listener

  Sometimes you may want to handle every text change event in text field as soon as it happens. You can handle these text changes using TextChangeListener.

  final TextField txtFld = new TextField();
  txtFld.setCaption("Field text change listner example");
  
  txtFld.focus();
  txtFld.setMaxLength(20);
  txtFld.setInputPrompt("Enter any text");
  
  final Label counter = new Label();
  counter.setValue(txtFld.getValue().length() + " of " + txtFld.getMaxLength());
  
  txtFld.addTextChangeListener(new TextChangeListener() {
  	private static final long serialVersionUID = -8043238443902618783L;
  
  	public void textChange(TextChangeEvent event) {
          counter.setValue(event.getText().length() + " of " + txtFld.getMaxLength());
      }
  });
  
  txtFld.setTextChangeEventMode(TextChangeEventMode.EAGER);
  
  layout.addComponents(txtFld);
  layout.addComponents(counter);
  

6. Empty Value Validation

To add empty field validation on a text field, use setRequired(), setRequiredError(), setValidationVisible() and add StringLengthValidator.

final TextField txtFld = new TextField();
txtFld.setCaption("Empty field validation example");

txtFld.setInputPrompt("Enter your name");

txtFld.setRequired(true);
txtFld.setRequiredError("Please enter your name to proceed !!");
txtFld.addValidator(new StringLengthValidator("Must be less than 20 chars", 1, 20, false));
txtFld.setValidationVisible(true);

txtFld.setTextChangeEventMode(TextChangeEventMode.LAZY);
txtFld.setNullRepresentation("");

txtFld.addTextChangeListener(new FieldEvents.TextChangeListener() {
	private static final long serialVersionUID = 1L;

	@Override
	public void textChange(FieldEvents.TextChangeEvent event) {
		try {
			txtFld.setValue(event.getText());

			txtFld.setCursorPosition(event.getCursorPosition());

			txtFld.validate();
		} catch (InvalidValueException e) {
			//Log error
		}
	}
});

layout.addComponents(txtFld);

In above example, we are validating the text field on every key press event. If you want to validate the field only on focus off, then use ValueChangeEventListner.

7. Addinng Number Validation on Vaadin Text Fields

If you want to force a text field to accept only integer values, then you can use IntegerRangeValidator class and validate on text change events.

final TextField txtFld = new TextField("Please enter only integer value");
layout.addComponent(txtFld);

//To convert string value to integer before validation
txtFld.setConverter(new StringToIntegerConverter());

//Add error message and min-max values allowed in field. If no limit than use null
txtFld.addValidator(new IntegerRangeValidator("The value has to be an integer", null, null));

//What if text field is empty - integer will be null in that case, so show blank when null
txtFld.setNullRepresentation("");

//Add validation hints in UI??
txtFld.setValidationVisible(true);

txtFld.setTextChangeEventMode(TextChangeEventMode.LAZY);

txtFld.addTextChangeListener(new FieldEvents.TextChangeListener() {
	private static final long serialVersionUID = 1L;

	@Override
	public void textChange(FieldEvents.TextChangeEvent event) {
		try {
			txtFld.setCursorPosition(event.getCursorPosition());
			txtFld.validate();
		} catch (InvalidValueException e) {
			//Log error
		}
	}
});

8. Styling Vaadin Text Fields

All text fields have style name v-textfield added to them so if you want any specific CSS to apply on all text fields then add it inside v-textfield class.

.v-textfield {
	//style to apply on all text fields
}

If you want to apply certain style on a single text field, then you can add the class name (e.g. darkBorder) to text field as below:

final TextField txtFld = new TextField("Custom Styled Text Box");
layout.addComponent(txtFld);

layout.addStyleName("darkBorder");

Now you can define the style rules in css file. Style name will be {.v-textfield + custom style class added to field}.

.v-textfield-darkBorder { 
	border: 5px solid gray;
}

Complete Sourcecode

Now let’s see all above examples as written for this tutorial.

package com.howtodoinjava.vaadin.demo;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.Property;
import com.vaadin.data.Property.ValueChangeEvent;
import com.vaadin.data.Validator.InvalidValueException;
import com.vaadin.data.util.converter.StringToIntegerConverter;
import com.vaadin.data.validator.IntegerRangeValidator;
import com.vaadin.data.validator.StringLengthValidator;
import com.vaadin.event.FieldEvents;
import com.vaadin.event.FieldEvents.TextChangeEvent;
import com.vaadin.event.FieldEvents.TextChangeListener;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.AbstractTextField.TextChangeEventMode;
import com.vaadin.ui.Label;
import com.vaadin.ui.Notification;
import com.vaadin.ui.Notification.Type;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {

	private static final long serialVersionUID = 1387172685749279538L;

	@Override
	protected void init(VaadinRequest vaadinRequest) {
		final VerticalLayout layout = new VerticalLayout();

		fieldLabelExample(layout);
		fieldSizeExample(layout);
		fieldLimitExample(layout);
		fieldFocusExample(layout);
		fieldValueChangeListenerExample(layout);
		fieldTextChangeListenerExample(layout);
		fieldNullValidationExample(layout);
		fieldNumberValidationExample(layout);
		customCSSExample(layout);

		layout.setMargin(true);
		layout.setSpacing(true);

		setContent(layout);
	}
	
	private void customCSSExample(VerticalLayout layout) {
		final TextField txtFld = new TextField("Custom Styled Text Box");
		layout.addComponent(txtFld);
		
		layout.addStyleName("darkBorder");
	}
	
	private void fieldNumberValidationExample(VerticalLayout layout) {
		
		final TextField txtFld = new TextField("Please enter only integer value");
		layout.addComponent(txtFld);
		
		//To convert string value to integer before validation
		txtFld.setConverter(new StringToIntegerConverter());
		
		//Add error message and min-max values allowed in field. If no limit than use null
		txtFld.addValidator(new IntegerRangeValidator("The value must be between 0 and 100", 0, 100));
		
		//What if text field is empty - integer will be null in that case, so show blank when null
		txtFld.setNullRepresentation("");
		
		//Add validation hints in UI??
		txtFld.setValidationVisible(true);
		
		txtFld.setTextChangeEventMode(TextChangeEventMode.LAZY);
		
		txtFld.addTextChangeListener(new FieldEvents.TextChangeListener() {
			private static final long serialVersionUID = 1L;

			@Override
			public void textChange(FieldEvents.TextChangeEvent event) {
				try {
					txtFld.setCursorPosition(event.getCursorPosition());
					txtFld.validate();
				} catch (InvalidValueException e) {
					//Log error
				}
			}
		});
	}

	private void fieldNullValidationExample(VerticalLayout layout) {

		final TextField txtFld = new TextField();
		txtFld.setCaption("Empty field validation example");

		txtFld.setInputPrompt("Enter your name");

		txtFld.setRequired(true);
		txtFld.setRequiredError("Please enter your name to proceed !!");
		txtFld.addValidator(new StringLengthValidator("Must be less than 20 chars", 1, 20, false));
		txtFld.setValidationVisible(true);

		txtFld.setTextChangeEventMode(TextChangeEventMode.LAZY);
		txtFld.setNullRepresentation("");

		txtFld.addTextChangeListener(new FieldEvents.TextChangeListener() {
			private static final long serialVersionUID = 1L;

			@Override
			public void textChange(FieldEvents.TextChangeEvent event) {
				try {
					txtFld.setValue(event.getText());

					txtFld.setCursorPosition(event.getCursorPosition());

					txtFld.validate();
				} catch (InvalidValueException e) {
					//Log error
				}
			}
		});

		layout.addComponents(txtFld);
	}

	private void fieldTextChangeListenerExample(VerticalLayout layout) {
		final TextField txtFld = new TextField();
		txtFld.setCaption("Field text change listner example");

		txtFld.focus();
		txtFld.setMaxLength(20);
		txtFld.setInputPrompt("Enter any text");

		final Label counter = new Label();
		counter.setValue(txtFld.getValue().length() + " of " + txtFld.getMaxLength());

		txtFld.addTextChangeListener(new TextChangeListener() {
			private static final long serialVersionUID = -8043238443902618783L;

			public void textChange(TextChangeEvent event) {
				counter.setValue(event.getText().length() + " of "
						+ txtFld.getMaxLength());
			}
		});

		txtFld.setTextChangeEventMode(TextChangeEventMode.EAGER);

		layout.addComponents(txtFld);
		layout.addComponents(counter);
	}

	private void fieldValueChangeListenerExample(VerticalLayout layout) {
		final TextField txtFld = new TextField();
		txtFld.setCaption("Field value change listner example");

		txtFld.focus();
		txtFld.setInputPrompt("Enter any text");

		txtFld.addValueChangeListener(new Property.ValueChangeListener() {
			private static final long serialVersionUID = 5678485350989070188L;

			public void valueChange(ValueChangeEvent event) {
				String value = (String) event.getProperty().getValue();
				// Do something with the value
				Notification.show("Value is: " + value, Type.TRAY_NOTIFICATION);
			}
		});
		// Fire value changes immediately when the field loses focus
		txtFld.setImmediate(true);

		layout.addComponents(txtFld);
	}

	private void fieldFocusExample(VerticalLayout layout) {
		final TextField txtFld = new TextField();
		txtFld.setCaption("Field focus example");

		txtFld.focus();

		layout.addComponents(txtFld);
	}

	private void fieldLimitExample(VerticalLayout layout) {
		final TextField txtFld = new TextField();
		txtFld.setCaption("Field limit example");

		txtFld.setMaxLength(10);

		layout.addComponents(txtFld);
	}

	private void fieldSizeExample(VerticalLayout layout) {
		final TextField txtFldOne = new TextField();
		txtFldOne.setCaption("Field size example 1");

		txtFldOne.setWidth(300, Unit.PIXELS);
		txtFldOne.setHeight(50, Unit.PIXELS);

		final TextField txtFldTwo = new TextField();
		txtFldTwo.setCaption("Field size example 2");

		txtFldTwo.setWidth("300px");
		txtFldTwo.setHeight("50px");

		layout.addComponents(txtFldOne);
		layout.addComponents(txtFldTwo);
	}

	private void fieldLabelExample(VerticalLayout layout) {
		final TextField txtFld = new TextField();
		// Set Text Field Label
		txtFld.setCaption("Type your name here:");
		layout.addComponents(txtFld);
	}

	@VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
	public static class MyUIServlet extends VaadinServlet {
		private static final long serialVersionUID = -2718268186398688122L;
	}
}

Resources:

Vaadin Text Field Component
TextChangeListener
ValueChangeListener
StackOverflow

Further Reading:

Vaadin ComboBox Examples Vaadin Hello World Web Application with Maven Vaadin Spring Security with BasicAuth