Design System

Vaadin Design System is an open-source design system for enterprise web applications. It consists of design tokens, components, and guidelines that allow designers and developers to collaborate and create high quality and consistent UIs.

Work in progress
These new component pages are still under construction.
Please see the old component pages for the missing pieces.

Form Inputs


Checkbox is an input field representing a binary choice. Checkbox Group is a group of related binary choices. See Checkbox

Combo Box

Combo Box is an input field that allows the user to choose a value from a set of options presented in a overlay list that can be filtered by typing into the field. See Combo Box

Custom Field

Custom Field is a component for wrapping multiple components as a single field. It has the same features as Input Fields, such as its own label, helper, validation, and data binding. Use it to create custom input components. 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

Email Field

The 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

Password Field

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

Radio Button

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


Select is an input field component that allows users to choose a single value from a set of options presented in a dropdown list. 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. Prefix and suffix components, such as icons, are also supported. See Text Field

Time Picker

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


Upload is a component for uploading one or more files. It shows the upload progression and status of each file. Files can be uploaded using the Upload button or via drag and drop. See Upload

Visualization & Interaction


The Anchor component allows the user to navigate to a given URL, for example, a different view in the application. See Anchor


Accordion is a vertically stacked set of expandable panels. It reduces clutter and helps maintain the user’s focus by showing only the relevant content at a time. See Accordion


The Button component allows users to perform actions. See Button

Context Menu

Context Menu is a component that you can attach to any component to display a context menu that appears on right (default) or left click. In a mobile browser, a long press opens the context menu. See Context Menu


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


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


Grid is a component for showing tabular data. See Grid

Menu Bar is a horizontal button bar with hierarchical drop-down menus. Menu items can either trigger an action, open a menu, or work as a toggle. See Menu Bar


Notifications are used to provide feedback to the user. They communicate information about activities, processes, and events in the application. See Notification

Progress Bar

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


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


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


App Layout

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

Form Layout

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


Login is a component that contains a login form. You can use it for authenticating the user with a username and password. It is compatible with password managers, supports internationalization and works on all device sizes. See Login

Basic Layouts

Vaadin features two basic layout components: Vertical Layout and Horizontal Layout. As their names suggest, they render their contents vertically and horizontally, respectively. Components are shown in the order they are added to either 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

Pro Components


Board is a powerful and easy to use layout element for building responsive views. It reorders the components inside it on different screen sizes while maximising the use of available space. See Board


Feature-rich interactive graph library that answers the data visualization needs of modern web applications. See Charts

Confirm Dialog

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

Cookie Consent aims to help you comply with privacy laws such as GDPR and CCPA. They require users be informed and explicitly give consent to the usage of cookies. See Cookie Consent


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

Grid Pro

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

Rich Text Editor

Rich Text Editor is an input field for entering rich text. It allows you to format and style your text using boldface, italics, headings, lists, images, links etc. See Rich Text Editor


Pro components are available in Pro, Prime, and Enterprise subscriptions.