Documentation versions (currently viewingVaadin 24)

Creating Components

How to create components using the Element API.

You can create components by combining or extending existing ones, or by constructing a new one using the Element API.

Single Element
Creating a component using a single HTML element.
Multiple Elements
Creating a component using multiple HTML elements.
Using API Helpers to Define Component Properties
How to use PropertyDescriptors to define a property name and default value.
Using Existing Components
Creating a component by combining existing components together.
Extending Components
Create a new component by extending any existing component.
Using Events
How to handle events in your components.
Component Containers
Creating a component that can contain other components.
Lifecycle Callbacks
How to react when a component is attached to or detached from an application.
Using Vaadin Mixin Interfaces
How provide common APIs and default behavior for sets of functions in most Web Components.
You can also create components using HTML with Lit templates. See Creating a Simple Component Using the Template API for more.