Components

Input field components have common features, such as label, helper text, disabled and required states, and more.

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, an extension of Text Field, only accepts email addresses as input.

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

Number Field has many of the same features as Text Field, but it 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 the user to select exactly one value from a list of related, but mutually exclusive, options.

Rich Text Editor is an input field for entering rich text.

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

Text Area is an input field component for multi-line text input.

Text Field allows the user to input and edit text.

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

Upload is a component for uploading one or more files.

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.

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 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.

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

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

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.

Grid is a component for showing tabular data.

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

Over 600 built-in icons for business applications.

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 allows you to show a list of messages, for example a chat log.

Notifications are used to provide feedback to the user.

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

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

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

Vaadin Spreadsheet is a component which allows displaying and interacting with the contents of an Excel file.

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

App Layout is a component for building common application layouts.

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

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.

Vaadin features two basic layout components: Vertical Layout and Horizontal Layout.

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