Choosing and structuring: radio buttons, lists, tabs

The first lesson of this chapter showed fields for text, dates and a checkbox. But often the user does not type a value, they pick it from a ready list: a post status, a language, a category. Vaadin has three selection components for this. And when a screen gets many fields, they are spread over tabs and collapsible blocks, which are structure components. Let us build a new version of the draft screen from them.

Radio buttons

RadioButtonGroup shows all options at once, and only one can be chosen:

// src/main/java/com/example/blog/views/DraftView.java
package com.example.blog.views;
 
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
import com.vaadin.flow.router.Route;
 
@Route("draft")
public class DraftView extends VerticalLayout {
 
    public DraftView() {
        RadioButtonGroup<String> status = new RadioButtonGroup<>("Status");
        status.setItems("Draft", "In review", "Published");
        status.setValue("Draft");
        status.addValueChangeListener(event -> Notification.show("Status: " + event.getValue()));
 
        add(status);
    }
}

At http://localhost:8080/draft there are three circles in a row, with "Draft" checked. Choose "Published" and "Status: Published" appears at the bottom. <String> is the value type: getValue() returns the chosen string.

Select or ComboBox

Both components are drop-down lists; the difference is search:

// src/main/java/com/example/blog/views/DraftView.java (part of the constructor)
Select<String> language = new Select<>();
language.setLabel("Language");
language.setItems("English", "Russian");
language.setValue("English");
 
ComboBox<String> category = new ComboBox<>("Category");
category.setItems("News", "Reviews", "Tips", "Interviews", "Releases", "Events");
category.setPlaceholder("Start typing");

Select just opens the list. In a ComboBox you can type: enter "re" and only "Reviews" and "Releases" remain. Imports: com.vaadin.flow.component.select.Select and com.vaadin.flow.component.combobox.ComboBox.

Component	When to choose it
`RadioButtonGroup`	2–5 options that should all be visible
`Select`	A short list, no search needed
`ComboBox`	A long list where typing to search helps

Tabs

TabSheet is a set of tabs, each with its own content. It switches them by itself:

// src/main/java/com/example/blog/views/DraftView.java (part of the constructor)
TextArea content = new TextArea("Text");
content.setWidthFull();
 
TabSheet tabs = new TabSheet();
tabs.add(new Tab(VaadinIcon.EDIT.create(), new Span("Text")), content);
tabs.add(new Tab(VaadinIcon.COG.create(), new Span("Settings")),
        new VerticalLayout(status, language, category));
tabs.setWidthFull();
 
add(tabs);

Replace the earlier add(status) with add(tabs). The screen shows two tabs with icons: "Text" with the post field and "Settings" with the status, language and category. A tab can also be created more simply: tabs.add("Text", content).

Collapsible blocks

Details is a block with a heading that expands on click. Accordion holds several such blocks, with at most one open:

// src/main/java/com/example/blog/views/DraftView.java (part of the constructor)
Details seo = new Details("Search engines", new TextField("Description"));
 
Accordion help = new Accordion();
help.add("How to write a title", new Paragraph("Short and specific: up to 60 characters."));
help.add("When to publish", new Paragraph("Readers are most active on weekday mornings."));
help.close();
 
add(seo, help);

Below the tabs, a collapsed "Search engines" block and two tips appear. Without help.close() the first Accordion panel would be open.

Icons

VaadinIcon is an enum of more than 600 icons. create() returns an Icon component that you configure like any other:

// src/main/java/com/example/blog/views/DraftView.java (part of the constructor)
Icon tip = VaadinIcon.LIGHTBULB.create();
tip.setColor("orange");
tip.setSize("20px");
tip.setTooltipText("Fill in the title first");
add(tip);

An orange light bulb appears, with a tooltip on hover. Button, Tab and SideNavItem accept icons too. The imports come from the com.vaadin.flow.component.icon package.

Common mistake

Tabs was used instead of TabSheet, with the content placed next to it:

// src/main/java/com/example/blog/views/DraftView.java (wrong)
Tabs tabs = new Tabs(new Tab("Text"), new Tab("Settings"));
add(tabs, content, settings);

There is no error, but clicking the tabs changes nothing: both blocks are visible at once. Tabs is only the strip of tabs; you have to hide the content yourself in addSelectedChangeListener. For the usual "each tab has its own block" case, use TabSheet.

Thanks for reading!