Documentation

Documentation versions (currently viewingVaadin 24)
A list of available Vaadin components.

Categories & Resources

Data Entry

Text fields, date pickers, combo boxes, and everything you need for forms.

Visualization & Interaction

Buttons, tables, menus, charts, etc.

Layouts

Components for structuring a UI without the need for CSS.

Styling

The styling of Vaadin components can be customized using style tokens, utility classes and custom CSS.

Figma Libraries

Design and prototype application UIs in Figma using the official Vaadin Figma libraries.

Accessibility

Designed for compliance with WCAG 2.1 level AA. Check the current status of components and read Vaadin’s accessibility statement.

<<https://vaadin.com/accessibility, Read about Vaadin Accessibility>>

Data Entry

Checkbox

Checkbox is an input field representing a binary choice.

Combo Box

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

Custom Field

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

Date Picker

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

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

Email Field

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

List Box

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

Number Field

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

Message Input

Message Input allows users to author and send messages.

Multi-Select Combo Box

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

Password Field is an input field for entering passwords.

Radio Button

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

Rich Text Editor

Rich Text Editor allows the user to author text that has rich formatting.

Select

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

Text Area

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

Text Field

Text Field allows users to enter text.

Time Picker

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

Upload

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

Visualization and Interaction

Accordion

Accordion is a vertically stacked set of expandable panels.

Avatar

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

Badge

Badges are colored text elements containing small bits of information.

Button

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

Charts

Charts is a feature-rich interactive charting library with a vast number of different chart types from basic plotting to complex financial charting.

Confirm Dialog

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

Context Menu

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

Cookie Consent aims to help you comply with privacy laws such as General Data Protection Regulation (GDPR) and California Consumer Privacy Act (CCPA).

CRUD

CRUD is a component for managing a dataset. It allows for easy displaying, editing, creating, and deleting of items.

Details

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

Dialog

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

Grid

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

Grid Pro

Grid Pro is an extension of the Grid component that provides inline editing with full keyboard navigation.

Icons

Over 600 built-in icons for business applications.

Map

Map is a component for displaying geographical maps from various sources.

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

Message List

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

Notification

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

Progress Bar

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

Scroller

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

Side Navigation

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

Spreadsheet

Vaadin Spreadsheet allows displaying and interacting with the contents of an Excel file.

Tabs

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

Tooltip

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

Tree Grid

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

Virtual List

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

Layouts

App Layout

App Layout is a component for building common application layouts.

Board

Board is a powerful and easy-to-use layout element for building responsive views.

Form Layout

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

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

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

Vertical Layout

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

Split Layout

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

Didn’t Find What You Need?

Browse Vaadin Directory

Vaadin Directory is a place where you can find add-ons built by the community for your applications, such as components and themes, and share your work with other community members.

Create Components in Java

You can create new components by combining and extending existing ones, or by constructing them using the Element Java API in Flow.

Integrate Web Components

Learn how you can integrate your own Web Components or other third-party W3C-standard Web Components into Vaadin applications.