How to get the rquired indicator shown?

Is there any way to show the required indicator in a form? In V8 the required indicator was a red asterisk. In V10 after much search and retries I was able to make appear a red dot, but I do not remember how and the documentation is not clear. I tried both setting asRequired through binder and setRequiredIndicatorVisible for text field, nothing appears.

Here is bug report that looks like fitting your case:

https://github.com/vaadin/vaadin-text-field-flow/issues/82

Hi Tatu, not so sure it’s the same case. Anyway I will not investigate further. After some considerations, I believe that the required indicator shall be placed in the label and not in the field, even for a homogeneity principle.

Suppose that you have a text field and a combo box, both required but the combo box (at least from the API) seems not to have a required indicator…

From an API point of view I would like to have a FormLayout.addRequiredField method that adds a field and place the required indicator in the label.

So I tried to create a Text (to be passed as label component) to which I append a superscript and red () or (required), but … surprise: I am unable to place HTML in a text, but this is the subject of another post.

OK, thanks to Martin Israelsen that indicated the Html component here is my solution as a reusable static function that I keep in a VadinKit class (spare functions), should anybody need it:


  /**
   * Wrap a text with a "Required" indicator to be used in form layout. Example:
   * <pre>
   *   TextField email = new TextField();
   *   myFormLayout.addFormItem(email, VaadinKit.requiredLabel("Email"));
   * </pre>
   *
   * @param text The text to be wrapped.
   * @return A component with the text and the required indicator.
   */
  private static Component requiredLabel(String text) {
    String indicatorText = "Req."; // or "(*)" if you prefer 
    return new Span(new Text(text), new Html("<sup style='color: red'> " + indicatorText + "</sup>"));
  }