Using HTML5 inputs in vaadin

Given the browsers running on smartphones (and increasingly also those running on the desktop), all the “new” input types coming with HTML5 become increasingly important. For instance:

<input type=“time“ …

makes iPhone, Android et al present an optimized way of selecting a time / duration:


Users are right to expect a fast and efficient application – hence it certainly makes sense to use the HTML5 inputs in vaadin as well. When developing mobile applications, there is little to beat the native inputs. They do enrich the possibilities offered by vaadin TouchKit to quite some extent. Only they have to be made available.

In order to achieve that, and based on daily development experience, Akquinet provides an (Apache 2.0 licensed) Addon for vaadin covering these HTML5 inputs:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Aside from the time field shown above, one can for instance create a range selection input. This is how it looks like on Chrome:


The following code creates this thing:

    RangeField rangeField = new RangeField();



    rangeField.setCaption(“Range between 2 and 10”);


Vaadin is empowered by a great community – and we’re happy to do a small (and hopefully effective) contribution with this Addon to enable HTML5 for vaadin.

Feel free to use this Addon! You find it on or on

We always appreciate suggestions and feedback!

5 thoughts on “Using HTML5 inputs in vaadin

  1. Hi Sebastian! The step attribute data type should be changed from Integer to Double or Float and if the value is not set, the attribute should not be rendered at all or rendered as step=”any”.
    The step attribute, if specified, must either have a value that is a valid floating-point number that parses to a number that is greater than zero, or must have a value that is an ASCII case-insensitive match for the string “any”.


  2. Thanks for your feedback!
    The initial idea was not to make too many assumptions on the data – but anyway: my first approach would be either overwriting the component to have getValueAsTime() or to wrap into a custom field…
    Let us know 😉

  3. It’s great, but I would like to return the corresponding data types

    Example: TimeField return on getValue() a java.sql.Time

Comments are closed.