Documentation

Documentation versions (currently viewingVaadin 23)
Tip
Designer resources

Designers can create pixel-perfect UI designs and prototypes, that are easy for developers to implement, using the popular design tool Figma and the official Vaadin Figma libraries.
Learn more

Form Inputs

Input Fields

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

Checkbox

Checkbox is an input field representing a binary choice. See Checkbox

Combo Box

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

Custom Field

Custom Field is a component for wrapping multiple components as a single field. See Custom 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. See Date Picker

Date Time Picker

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

Email Field

Email Field, an extension of Text Field, only accepts email addresses as input. See Email Field

List Box

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

Number Field

Number Field sports many of the same features as Text Field, but only accepts numeric input. See Number Field

Message Input

Message Input allows users to author and send messages. See Message Input

Password Field

Password Field is an input field for entering passwords. See Password Field

Radio Button

Radio Button Group allows the user to select exactly one value from a list of related, but mutually exclusive, options. See Radio Button

Rich Text Editor

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

Select

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

Text Area

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

Text Field

Text Field allows the user to input and edit text. See Text Field

Time Picker

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

Upload

Upload is a component for uploading one or more files. See Upload

Visualization and Interaction

Accordion

Accordion is a vertically stacked set of expandable panels. See Accordion

Avatar

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

Badge

Badges are colored text elements containing small bits of information. See Badge

Button

The Button component allows users to perform actions. See Button

Charts

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

Confirm Dialog

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

Context Menu

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

Cookie Consent aims to help you comply with privacy laws such as GDPR and CCPA. See Cookie Consent

CRUD

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

Details

Details is an expandable panel for showing and hiding content from the user, in order to make the UI less crowded. See Details

Dialog

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

Grid

Grid is a component for showing tabular data. See Grid

Grid Pro

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

Icons

Over 600 built-in icons for business applications. See Icons

Map

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

Menu Bar is a horizontal button bar with hierarchical dropdown menus. See Menu Bar

Message List

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

Notification

Notifications are used to provide feedback to the user. See Notification

Progress Bar

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

Tabs

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

Scroller

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

Virtual List

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

Layouts

App Layout

App Layout is a component for building common application layouts. See App Layout

Board

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

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. See Form Layout

Login

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

Basic Layouts

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

Split Layout

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

Design System Resources

Foundation

Design tokens for typography, colors, spacing, and visual styles.

Figma Libraries

Prototype and design application layouts in Figma using official Vaadin libraries.

Custom Themes

Learn how to create a custom design system theme.

Theme Editor

An online editor to create a custom theme for your application.

CSS Utility Classes

A set of CSS utility classes that enable building any UI without custom CSS.