Menu
Documentation
Documentation versions (currently viewingVaadin 23)
V23
Vaadin 24
Vaadin 23
Vaadin 14
Vaadin 10
Vaadin 8
Vaadin 7
Search
Change to dark theme
You are viewing documentation for Vaadin 23.
View latest documentation
Dismiss banner
Documentation
Expand top-level sections
Overview
Show sub-pages of Get Started
Get Started
Quick Start
Starting a Project
Show sub-pages of Step-by-step guide
Step-by-step guide
Importing to an IDE
Running an Application
Show sub-pages of Tutorial
Tutorial
Overview
Project Setup
Creating a View
Creating a Component
Accessing The Database
Forms and Validation
Handling View State
Navigation and App Layout
Login and Authentication
Installation and offline (PWA)
Unit and Integration Testing
End-to-end testing
Production Deployment
Download PDF version
Show sub-pages of Components
Components
Accordion
App Layout
Avatar
Badge
Basic Layouts
Board
Button
CRUD
Show sub-pages of Charts
Charts
Installing Charts for Vaadin Flow
Basic Use
Chart Types
Chart Configuration
Chart Styling
Chart Data
Migrating from earlier versions
Timeline
Exporting Charts as SVG
Elements API
Figma Library
Checkbox
Combo Box
Confirm Dialog
Context Menu
Cookie Consent
Custom Field
Date Picker
Date Time Picker
Details
Dialog
Email Field
Form Layout
Grid
Grid Pro
Icons
Input Fields
List Box
Login
Map
Menu Bar
Message Input
Message List
Multi-Select Combo Box
Notification
Number Field
Password Field
Progress Bar
Radio Button
Rich Text Editor
Scroller
Select
Split Layout
Spreadsheet
Tabs
Text Area
Text Field
Time Picker
Tooltip
Tree Grid
Upload
Virtual List
Show sub-pages of Application Basics
Application Basics
Building a UI
Handling Events
Creating a Main View
Basic Routing and Navigation
Images and Icons
Styling
Show sub-pages of Routing and Navigation
Routing and Navigation
Defining Routes
Navigating between Routes
Route Parameters
Updating URL Parameters without Navigation
Navigation Lifecycle
Router Layouts and Nested Router Targets
Retrieving Routes
Router Exception Handling
Getting Registered Routes
Updating Page Title on Navigation
Registering Routes Dynamically
Show sub-pages of Additional Guides
Additional Guides
Query Parameters
Route Templates
Show sub-pages of Creating UI
Creating UI
Basic Features
Enabled State
Keyboard Shortcuts
HTML Elements
Show sub-pages of Creating Components
Creating Components
Single Element
Multiple Elements
Using API Helpers to Define Component Properties
Using Existing Components
Extending Components
Using Events
Component Containers
Lifecycle Callbacks
Using Vaadin Mixin Interfaces
Show sub-pages of Integrating Web Components
Integrating Web Components
Creating a Java API
Debugging
In-Project Component
Web Components Intro
Show sub-pages of Element API
Element API
Properties and Attributes
Listening to User Events
Remote Procedure Calls
Retrieving User Input
Dynamic Styling
Shadow Roots
Show sub-pages of Drag and Drop
Drag and Drop
Drag Source
Drop Target
Show sub-pages of Templates
Templates
Template-based Components
Binding to Components
Combining with Binder
Sub-Templates
Adding Server-side Components
Styling
Detecting Component Mappings
Limitations
Show sub-pages of Polymer Templates (deprecated)
Polymer Templates (deprecated)
Creating a Simple Component Using the Template API
Combining Templates and Binders
Dynamically Adding Server-side Components to Templates
Handling User Events
Binding Model Data
Using Model Beans
Using Model Encoders
Creating Contents Dynamically Based on Items List
Using Parent Layout
Show sub-pages of Styling
Styling
Getting Started
Show sub-pages of Lumo Theme
Lumo Theme
Show sub-pages of Variants
Variants
Light and Dark Modes
Compact Mode
Component Variants
Show sub-pages of Design Tokens
Design Tokens
Styling Using Design Tokens
Typography
Color
Size and Space
Shape
Elevation
Interaction
Utility Classes
Figma Libraries
@Theme annotation
Show sub-pages of Custom Themes
Custom Themes
Creating Custom Themes
Custom Component Variants
Theme Editor
Packaging a Theme
Theme Configuration
Styling Components
Style Scopes
CSS Custom Properties
Show sub-pages of Advanced Guides
Advanced Guides
Show sub-pages of Material Theme
Material Theme
Typography
Color
@NoTheme annotation
Importing Standalone Style Sheets
Show sub-pages of Data Binding
Data Binding
Binding Data to Forms
Validating and Converting User Input
Loading from and Saving to Business Objects
Binding Beans to Forms
Binding Items to Components
Creating a Component that Has a Value
Show sub-pages of Security
Security
Enabling Security
Show sub-pages of Advanced Security Topics
Advanced Security Topics
Security Architecture
Security Practices at Vaadin
Common Vulnerabilities
Frequently Reported Issues
Securing Plain Java Applications
Storing Sensitive Data
Show sub-pages of Testing
Testing
Show sub-pages of UI Unit Testing
UI Unit Testing
Getting Started
Querying Components
UI Snapshots
Spring-based Projects
Show sub-pages of End-to-End Testing
End-to-End Testing
Getting Started
Installing WebDrivers
Creating Tests
Creating Maintainable Tests using Page Objects
Low-Level Element Interactions
Taking and Comparing Screenshots
Advanced Testing Methods
Making Tests Reliable
Behavior-Driven Development
Running Tests with Maven
Running Tests on a CI Server
Running Tests on Multiple Browsers
Setting up your Own Test Grid
Testing with Selenium
Browser-based Testing
Advanced Testing Concepts
Behavior-Driven Development
Creating Maintainable Tests using Page Objects
Creating Tests
Getting Started
Installing WebDrivers
Low-Level Element Interactions
Making Tests Reliable
Running Tests on Multiple Browsers in a Grid
Running Tests on a CI Server
Running Tests with Maven
Selenium Testing
Setting up your Own Test Grid
Taking and Comparing Screenshots
Browser-less Testing
Browser-less Testing with Spring Framework
Getting Started
Screenshots in Browser-less Testing
Searching for Components
Show sub-pages of Integrations
Integrations
Show sub-pages of Spring
Spring
Spring Boot
Spring MVC
Routing
Scopes
Configuration
Show sub-pages of CDI
CDI
Using CDI Beans
Vaadin CDI Scopes
Observable Vaadin Events
Vaadin Service Interfaces as CDI Beans
Show sub-pages of Embedding
Embedding
Tutorial
Application Properties
Theming
Configuring Push
Security
Preserve on Refresh
Limitations
Show sub-pages of OSGi
OSGi
Using Services with Vaadin
Apache Karaf
Quarkus
Show sub-pages of Portlet Support
Portlet Support
Creating Vaadin Portlets
Handling Portlet Phases
Inter-Portlet Communication
Creating Multi-Module Portlet Project
Adding a Vaadin Portlet Module to an Existing Multi-Module Project
Appendix A - Address Book Example Project Demonstration
Show sub-pages of Databases
Databases
PostgreSQL
MariaDB
MySQL
Show sub-pages of Configuration
Configuration
Properties
Node.js
npm/pnpm
Live Reload
PWA
Maven
Source Control
Licenses
Feature Flags
Show sub-pages of Deploying to Production
Deploying to Production
Production Build
Servlet Container
Spring Boot
Show sub-pages of Cloud Providers
Cloud Providers
Amazon Web Services
Azure
Google Cloud
Heroku
Docker Deployment
Distributed Deployment Architecture
Troubleshooting
Show sub-pages of Advanced Topics
Advanced Topics
Application Lifecycle
Localization
Modifying the Bootstrap Page at Runtime
Upgrading from Vaadin 7 or 8 using Classic Components
The Loading Indicator
Modifying how dependencies are loaded with DependencyFilter
Service Init Listener
Dynamic Content
History API
StreamReceiver
Session and UI Listeners
Custom Error Handling
Customizing System Messages
Preserving the State on Refresh
Servlet-Container Authentication
Handling Long-Running Tasks
Browser Access
Loading Resources
CSS Loading Order
Server Push
Server-Side Modality
Custom Instantiator
Hide sub-pages of Tools
Tools
Show sub-pages of AppSec Kit
AppSec Kit
Getting Started
Advanced Topics
Show sub-pages of Azure Cloud Kit
Azure Cloud Kit
Getting Started
Autoscaling
Transport Layer Security
Multiple Environments
Show sub-pages of Collaboration Kit
Collaboration Kit
Overview
Quick Start Guide
Licensing & Pricing
Production Configuration
Show sub-pages of Binder and Components
Binder and Components
Binder
Avatar Group
Message List
Show sub-pages of Collaboration Managers
Collaboration Managers
Presence Manager
Message Manager
Form Manager
Show sub-pages of Advanced
Advanced
Connection Context
Topic API
Collaboration List
Integrating External Servlets
Clustering Support
Show sub-pages of Design System Publisher
Design System Publisher
Overview
Getting Started
Development Build
Editing Content
Site Customization
Custom Theme
Adding UI Examples
Production Setup
Updating
Troubleshooting
Hide sub-pages of Designer
Designer
Overview
Show sub-pages of Tutorial
Tutorial
Getting Started
Build Main View
Build Contact Form
Get Application Up and Running
Connecting Main View to Java
Connecting Contact Form to Java
Wrap Up
Show sub-pages of Using Designer
Using Designer
Designing
Connect to Java
Previewing
Laying Out Views
Theming
Frequently Asked Questions
Show sub-pages of Kubernetes Kit
Kubernetes Kit
Getting Started
Rolling Updates
Session Replication
Session Replication Debug Tool
Configuration
Show sub-pages of Multiplatform Runtime
Multiplatform Runtime
Overview
Show sub-pages of Step by Step Guide
Step by Step Guide
pom.xml configuration for Vaadin 7
pom.xml configuration for Vaadin 8
Removing Legacy Servlets
Converting Legacy UIs
Running a Spring Boot application
Running a Vaadin Legacy CDI application with MPR and Flow
Navigation using Navigator
Converting a UI when not using other frameworks
Converting UI parameters
Adding legacy components to Flow layouts
Show sub-pages of Configuration and advanced topics
Configuration and advanced topics
Adding Legacy Components in a Flow Layout
Legacy theme in MPR
Custom Widget Set and MPR
Limitations of MPR
Setting up production mode
Push and MPR
Using sessions with MPR
Using a custom legacy UI class
Creating V7 and V14+ CDI applications side-by-side
Show sub-pages of Observability Kit
Observability Kit
Getting Started
Configuration
Customization
Show sub-pages of Integrations
Integrations
Datadog
Grafana
Jaeger and Prometheus
New Relic
Reference
Show sub-pages of SSO Kit
SSO Kit
Getting Started
Theming
Show sub-pages of Integrations
Integrations
Keycloak
Okta
Show sub-pages of Swing Kit
Swing Kit
Getting Started
Adding Views
Cross-Communication
Exception Handling
Show sub-pages of Upgrading
Upgrading
Vaadin 14 to 23 Upgrade Instructions
Recommended Changes
Upgrade Guide Generator
Vaadin 23 to 24 Upgrade Instructions
Supported Technologies
API Reference
Show sub-pages of Contributing to Documentation
Contributing to Documentation
Overview
Show sub-pages of Authoring
Authoring
Getting Started
Editing Tools
Content Guidelines
Formatting AsciiDoc
Submitting Documentation
Show sub-pages of Style Guide
Style Guide
Overview
Word List
Voice and Tone
Accessibility
Global Audience and Inclusiveness
Language Style
Formatting Style
Grammar
Punctuation
Documentation Process
Show sub-pages of Contributing to Projects
Contributing to Projects
Overview
IntelliJ IDEA Editor Settings
Eclipse Editor Settings
Unit Testing in Flow
Integration Testing in Flow
Testing of Web Components
Testing of Java Integration for Web Components
Documentation
Tools
Designer
Overview
This page has moved:
Designer
Overview