Components
Form Inputs
Input Fields
Input field components have common features such as label, helper text, disabled and required states, and more. See Input Fields
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
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
Select
Select allows users to choose a single value from a list of options presented in an overlay. See Select
Time Picker
Time Picker is an input field for entering or selecting a specific time. See Time Picker
Visualization & Interaction
Avatar
Avatar is a graphical representation of an object or entity, for example a person or an organisation. See Avatar
Charts
Feature-rich interactive graph library that answers the data visualization needs of modern web applications. See Charts
CRUD
CRUD is a component for managing a dataset. It allows for easy displaying, editing, creating, and deleting of items. See CRUD
Context Menu
Context Menu is a component that you can attach to any component to display a context menu. See Context Menu
Cookie Consent
Cookie Consent aims to help you comply with privacy laws such as GDPR and CCPA. See Cookie Consent
Details
The Details component is an expandable panel for showing and hiding content from the user 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 Pro
Grid Pro is an extension of the Grid component that provides inline editing with full keyboard navigation. See Grid Pro
Message List
Message List allows you to show a list of messages, for example, a chat log. See Message List
Tabs
Tabs are used to organize and group content into sections that the user can navigate between. See Tabs
Layouts
Basic Layouts
Vaadin features two basic layout components: Vertical Layout and Horizontal Layout. See Basic Layouts
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
Login is a component that contains a login form. You can use it for authenticating the user with a username and password. See Login
Split Layout
Split Layout is a component with two content areas and a draggable split handle between them. See Split Layout