flow-components icon indicating copy to clipboard operation
flow-components copied to clipboard

Add support for having labels

Open mvysny opened this issue 5 years ago • 7 comments

Hi, please add support for having labels. This is very useful e.g. in forms. Both for ListBox and for MultiSelectListBox.

mvysny avatar Apr 01 '20 06:04 mvysny

listBox.getElement().setProperty("label", "foo") doesn't seem to work, so the only workaround is to wrap the ListBox in a CustomField.

mvysny avatar Apr 01 '20 07:04 mvysny

That is a very common feature. Thanks

ruizrube avatar Apr 20 '20 09:04 ruizrube

See also https://github.com/vaadin/vaadin-list-box/issues/11#issuecomment-545316100

web-padawan avatar Jul 23 '20 17:07 web-padawan

A number of other Vaadin components support label out-of the box, so without the need to wrap it in a CustomField. I think having a label with / as part of a input control is a very normal and helpful approach.

So why deviate by not supporting label ootb?

quartelh avatar Aug 20 '20 15:08 quartelh

Workaround:

import com.vaadin.flow.component.customfield.CustomField;
import com.vaadin.flow.component.listbox.MultiSelectListBox;

import java.util.Set;

public class MultiSelectListBoxWithLabel<T> extends CustomField<Set<T>> {

    private MultiSelectListBox<T> multiSelectListBox = new MultiSelectListBox<>();

    public MultiSelectListBoxWithLabel(String label, T ...values) {
        super();
        this.multiSelectListBox.setItems(values);
        this.multiSelectListBox.addValueChangeListener(event -> updateValue());
        setLabel(label);
        add(multiSelectListBox);
    }

    @Override
    protected Set<T> generateModelValue() {
        return multiSelectListBox.getSelectedItems();
    }

    @Override
    protected void setPresentationValue(Set<T> newPresentationValue) {
        multiSelectListBox.setValue(newPresentationValue);
    }

    public MultiSelectListBox<T> getMultiSelectListBox() {
        return multiSelectListBox;
    }
}

Is this the correct way of wrapping into a CustomFiled?

istibekesi avatar Jul 09 '21 10:07 istibekesi

Btw, I ended up using CheckboxGroup. I realized that CheckboxGroup is more rounded compared to ListBox and fits better in the Vaadin components palette, supporting labels, itemLabelGenerator... etc.

istibekesi avatar Jul 09 '21 11:07 istibekesi

Helpers and validation (and probably some other APIs) should be considered as well, to make it a proper field component.

rolfsmeds avatar Aug 22 '24 13:08 rolfsmeds