Documentation

You are viewing documentation for Vaadin 23. View latest documentation

Documentation

Creating UI in Vaadin Applications

How to use components, create your own, or integrate 3rd 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.

Browse components

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
Shortcuts allow you to assign keyboard shortcuts to your components to improve end-user experience.
HTML Elements
Flow comes with a set of components for standard HTML elements.
Creating Components
Creating components by combining or extending existing ones, or by constructing a new one using the Element API.
Integrating Web Components
Element API
You can control the HTML DOM in the browser from the server-side using the Element API.
Drag and Drop
Drag and drop between components as well as between the UI and the operating system.
Templates
In addition to imperative Java code, you can build views declaratively using templates. The components in such a template can be bound directly to data items.