Vaadin input fields with inline icon buttons for help/info, validation and input helpers

Question

I need to find a solid way in the Vaadin 8 (or later) to add icon buttons to fields, text areas and even checkboxes and probably labels.

Is there already some inbuilt support that I could leverage? I noticed for example how Vaadin shows component errors with a red exclamation mark that appears next to the field - is that mechanism somehow accessible and extendable?

Did you implement something similar? Could you share some general strategy advice on how to achieve this?

Ideally these icons would show inside the field, but I could live with them being shown next to the input, as long as it doesn't completely wreck the page layout.

These will be used to show:

• a help button that pops up help
• a validation button (warning or error) that shows validation info
• an input helper button to help choose input (e.g. poppping up a calendar or other entity selection dialog)
• a clear button to clear input

Basically I'd like to have the same like Vaadin already implemented for the DateField with the calendar icon, except that I need several of these buttons, and I need to be able to control them (and they should show on the right side):

Answer 1

I decided to create custom components using Composite or CustomComponent.

The root of the custom component is a HorizontalLayout, where I place the desired buttons next to the input field.

This approach will also allow me to wrap Label, ComboBox, CheckBox, DateField, PasswordField etc.

It's also extendable if I decide to add additional markers, like for example a dirty/modified marker or a required input marker.

Answer 2

In your question you stated "... icon buttons to fields, text areas ...".

For fields, it is better to use com.vaadin.ui.CustomField instead of Composite or CustomComponent.