Components

Checkbox is an input field representing a binary choice.

Combo Box allows the user to choose a value from a filterable list of options presented in an overlay.

Custom Field is a component for wrapping multiple components as a single field.

Date Picker is an input field that allows the user to enter a date by typing or by selecting from a calendar overlay.

Date Time Picker is an input field for selecting both a date and a time.

Email Field is an extension of Text Field that accepts only email addresses as input.

List Box allows the user to select one or more values from a scrollable list of items.

Number Field is an input field that accepts only numeric input.

Message Input allows users to author and send messages.

Multi-Select Combo Box allows the user to choose one or more values from a filterable list of options presented in an overlay.

Password Field is an input field for entering passwords.

Radio Button Group allows users to select one value among multiple choices.

Select allows users to choose a single value from a list of options presented in an overlay.

Text Area is an input field component that allows entry of multiple lines of text.

Text Field allows users to enter text.

Time Picker is an input field for used entering or selecting a specific time.

Upload allows the user to upload files, giving feedback to the user during the upload process.

Auto Grid is a component for displaying tabular data based on a Java backend service.

Accordion is a vertically stacked set of expandable panels.

Avatar is a graphical representation of an object or entity, for example, a person or an organization.

Badges are colored text elements containing small bits of information.

The Button component allows users to perform actions. It comes in several different style variants and supports icons as well as text labels.

Confirm Dialog is a modal Dialog used to confirm user actions.

Context Menu is a component that you can attach to any component to display a context menu.

Details is an expandable panel for showing and hiding content from the user, to make the UI less cluttered.

Dialog is a small window that can be used to present information and user interface elements in an overlay.

Vaadin Grid is a component for displaying tabular data, including various enhancements to grid renderings.

Over 600 built-in icons for business applications.

Menu Bar is a horizontal button bar with hierarchical drop-down menus.

Message List allows you to show a list of messages, for example, a chat log.

Notification is used to provide feedback to the user about activities, processes, and events in the application.

A generic overlay whose position is anchored to an element in the UI.

Progress Bar shows the amount of completion of a task or process.

Scroller is a component container for creating scrollable areas in the UI.

Side Navigation provides a vertical list of navigation links with support for collapsible, nested sections.

Tabs are used to organize and group content into sections that the user can navigate.

Tooltips are small pop-ups for providing additional information about other UI elements.

Tree Grid is a component for displaying hierarchical tabular data grouped into expandable nodes.

Virtual List allows you to render a long list of items inside a scrollable container without sacrificing performance.

App Layout is a component for the root layout of a Vaadin application. It provides predefined areas for the navigation drawer, the header, and the view’s content.

Form Layout allows you to build responsive forms with multiple columns, and to position input labels above or to the side of the input.

Login is a component that contains a log-in form. You can use it to authenticate the user with a username and password.

Horizontal Layout places components side-by-side in a row.

Vertical Layout places components top-to-bottom in a column.

Split Layout is a component with two content areas and a draggable split handle between them.