Using Vaadin Components

Vaadin Design System includes a set of components that you can use to build your UI. The components have a server-side Java API in addition to the TypeScript API for client-side development.

You use the components by creating one and then adding it to a containing layout.

For example, to add a Button component, create the object and add it to a layout (here the calling object extends a layout):

Open in a
new tab
Button button = new Button("Click me!",
  event -> event.getSource().setText("Clicked!!!"));
add(button);

In addition to the Vaadin components, Vaadin includes an API for standard HTML elements, as well as for using any HTML elements, as outlined below.

Components for Standard HTML Elements

Flow comes with a set of components for standard HTML elements.

The module flow-html-components contains:

ComponentHTML ElementNotes

Anchor

a

Article

article

Aside

aside

DescriptionList

dl

Div

dl

Emphasis

em

Footer

footer

H1, .., H6

h1, .., h6

Header

header

Hr

hr

Iframe

iframe

Image

img

Input

input

Label

label

ListItem

li

Main

main

NativeButton

button

Button class is used for vaadin-button Vaadin component.

NativeDetails

details

Details class is used for vaadin-details Vaadin component.

Nav

nav

OrderedList

ol

Paragraph

p

Pre

pre

Section

section

Span

span

UnorderedList

ul

Standard HTML Components have an API that allows setting most typical properties and attributes. You can also use the Element API to set any property or attribute in case the component API does not have ready-made method for the purpose. The components that can contain other components implement the HtmlContainer interface to be able to make a hierarchical structure. The Element API allows creating any standard HTML element by using the Element constructor. The ElementFactory class contains factory methods for many standard HTML elements.

The flow-html-components module is not a necessary part of Flow and may be excluded in your project. The standard vaadin dependency (see below) inherits flow-html-components artifact through its transitive vaadin-core dependency. You may exclude this artifact explicitly or include if you don not use the vaadin dependency in your project:

<dependencies>
    <!-| other dependencies -->
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>flow-html-components</artifactId>
        <version>${flow.version}</version>
    </dependency>
</dependencies>

Vaadin Platform includes a set of components, with server-side Java APIs, which you can use to build your UI.

The components, together with Flow, are included as platform dependencies.

Tip
Free training courses
Watch the Vaadin 14: Introduction free training video to learn more about Vaadin terminology and what Vaadin components are.

The vaadin-core module includes all open-source components, such as Text Field, Button and Grid. The vaadin module extends this set to include all officially supported components in Vaadin, like Vaadin Charts.

Vaadin Dependency

The components are part of Vaadin and are included as dependencies, together with Flow. Each component has a Java API.

Using the platform dependency (com.vaadin:vaadin) ensures that all available components, both open source and commercial, are included automatically. You are guaranteed to get compatible versions of both Flow and the components.

The following example shows how to declare the vaadin.platform dependency:

<dependencies>
    <!-| other dependencies -->
    <!-| component dependency -->
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin</artifactId>
        <version>${vaadin.platform.version}</version>
    </dependency>
</dependencies>
Note
Including component dependecies individually
It is possible to include components individually by declaring a dependency for each component. See below for an example.

The platform also includes themes for the components that you can customize to ensure the styling suits your needs. See Design System for more information.

You can find additional prebuilt Web Components (with Java APIs) contributed by the Vaadin community in the Vaadin Directory.

Individual Component Dependencies

As an alternative to using the platform dependency, you can declare single components as dependencies.

You should add both the Vaadin bom and the relevant Flow component package, for example vaadin-button-flow, to your project dependencies. The Vaadin bom fixes all vaadin-related dependencies to a tested combination, so that the individual components can be added safely. Without the BOM, some dependencies may change in the future, because of new releases, or because of their use of version ranges.

The following example shows how to add the Button component in your pom.xml using Maven:

<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-bom</artifactId>
            <version>
                ${vaadin.platform.version}
            </version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>

<dependencies>
    <!-| other dependencies -->

    <!-| component dependency -->
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-button-flow</artifactId>
    </dependency>
</dependencies>