Documentation

Documentation versions (currently viewingVaadin 24)

Creating UI in Vaadin Applications

How to use components, create your own, or integrate third party web components.

The 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 a component by first creating it and then adding it to a containing layout.

For example, to add a Button component, create the object and add it to a layout.

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

Topics

Basic Features
Common features available in all components.
Enabled State
Components that allow user interaction can have three different enabled states.
Keyboard Shortcuts
Creating keyboard shortcuts to components for a better user experience.
HTML Elements
Flow comes with a set of components for standard HTML elements.
Creating Components
How to create components using the Element API.
Integrating Web Components
How to create new HTML tags with custom names.
Element API
You can control the HTML DOM in the browser from the server-side using the Element API.
Drag & Drop
Drag and drop between components as well as between the UI and the operating system.
Templates
How to build views declaratively using templates.