index.adoc

---
title: Components
page-title: How to use Components | Vaadin components
description: A list of available Vaadin components.
meta-description: Explore the full range of Vaadin components to enhance your web applications.
order: 30
layout: index
page-links:
  - https://github.com/vaadin/web-components/releases/tag/v{moduleNpmVersion:vaadin-themable-mixin}[Web Components {moduleNpmVersion:vaadin-themable-mixin}]
  - https://github.com/vaadin/flow-components/releases/tag/{moduleMavenVersion:com.vaadin:vaadin-lumo-theme}[Flow Components {moduleMavenVersion:com.vaadin:vaadin-lumo-theme}]
section-nav: flat reveal
---


= Components
:toc: macro
:toc-title: Categories


[.ds.cards.quiet.large.hide-title]
== Categories & Resources


[.cat-dataentry]
=== Data Entry

image::{articles}/components/_images/cat-dataentry.svg[opts=inline, role=banner]

Text fields, date pickers, combo boxes, and everything you need for forms.

[.sr-only]
<<form_inputs, Form input components>>


[.cat-vizandix]
=== Visualization & Interaction

image::{articles}/components/_images/cat-vizandix.svg[opts=inline, role=banner]

Buttons, tables, menus, charts, etc.

[.sr-only]
<<vis_and_ix, Visualization and interaction components>>


[.cat-layouts]
=== Layouts

image::{articles}/components/_images/cat-layouts.svg[opts=inline, role=banner]

Components for structuring a UI without the need for CSS.


[.sr-only]
<<layout_components, Layout components>>

ifdef::flow,lit[]
[.res-styling]
=== Styling

image::{articles}/components/_images/theme-editor-icon.png[role=banner,width=224]

The styling of Vaadin components can be customized using style tokens, utility classes and custom CSS.

[.sr-only]
<<{articles}/styling#, Read about how to style Vaadin components>>
endif::[]

[.res-figma]
=== Figma Libraries

image::{articles}/components/_images/figma-logo.svg[opts=inline, role=banner]

Design and prototype application UIs in Figma using the official Vaadin Figma libraries.

[.sr-only]
<<figma#, See Figma Libraries>>


[.res-a11y]
=== Accessibility

image::{articles}/components/_images/accessibility-symbol.svg[opts=inline, role=banner]

Designed for compliance with WCAG 2.1 level AA. Check the current status of components and read Vaadin's accessibility statement.

[.sr-only]
<<https://vaadin.com/accessibility, Read about Vaadin Accessibility>>


:components-path-prefix:

// tag::component-list[]

[.cards.quiet.component-cards]
== Data Entry [[form_inputs]]


[.component-card]
=== Checkbox

image::{components-path-prefix}checkbox/checkbox.png["", role="banner"]

include::checkbox/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}checkbox#,See Checkbox>>


[.component-card]
=== Combo Box

image::{components-path-prefix}combo-box/combo-box.png["", role="banner"]

include::combo-box/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}combo-box#,See Combo Box>>


[.component-card]
=== Custom Field

image::{components-path-prefix}custom-field/custom-field.png["", role="banner"]

include::custom-field/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}custom-field#,See Custom Field>>


[.component-card]
=== Date Picker

image::{components-path-prefix}date-picker/date-picker.png["", role="banner"]

include::date-picker/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}date-picker#,See Date Picker>>


[.component-card]
=== Date Time Picker

image::{components-path-prefix}date-time-picker/date-time-picker.png["", role="banner"]

include::date-time-picker/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}date-time-picker#,See Date Time Picker>>


[.component-card]
=== Email Field

image::{components-path-prefix}email-field/email-field.png["", opts=inline, role="banner"]

include::email-field/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}email-field#,See Email Field>>


[.component-card]
=== List Box

image::{components-path-prefix}list-box/list-box.png["", opts=inline, role="banner"]

include::list-box/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}list-box#,See List Box>>


[.component-card]
=== Number Field

image::{components-path-prefix}number-field/number-field.png["", opts=inline, role="banner"]

include::number-field/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}number-field#,See Number Field>>


[.component-card]
=== Message Input

image::{components-path-prefix}message-input/message-input.png["", role="banner"]

include::message-input/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}message-input#,See Message Input>>


[.component-card]
=== Multi-Select Combo Box

image::{components-path-prefix}multi-select-combo-box/multi-select-combo-box.png["", role="banner"]

include::multi-select-combo-box/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}multi-select-combo-box#,See Multi-Select Combo Box>>


[.component-card]
=== Password Field

image::{components-path-prefix}password-field/password-field.png["", opts=inline, role="banner"]

include::password-field/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}password-field#,See Password Field>>


[.component-card]
=== Radio Button

image::{components-path-prefix}radio-button/radio-button.png["", opts=inline, role="banner"]

include::radio-button/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}radio-button#,See Radio Button>>


[.component-card.commercial]
=== Rich Text Editor

image::{components-path-prefix}rich-text-editor/rich-text-editor.png["", opts=inline, role="banner"]

include::rich-text-editor/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}rich-text-editor#,See Rich Text Editor>>


[.component-card]
=== Select

image::{components-path-prefix}select/select.png["", opts=inline, role="banner"]

include::select/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}select#,See Select>>


[.component-card]
=== Text Area

image::{components-path-prefix}text-area/text-area.png["", opts=inline, role="banner"]

include::text-area/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}text-area#,See Text Area>>


[.component-card]
=== Text Field

image::{components-path-prefix}text-field/text-field.png["", opts=inline, role="banner"]

include::text-field/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}text-field#,See Text Field>>


[.component-card]
=== Time Picker

image::{components-path-prefix}time-picker/time-picker.png["", opts=inline, role="banner"]

include::time-picker/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}time-picker#,See Time Picker>>


[.component-card]
=== Upload

image::{components-path-prefix}upload/upload.png["", opts=inline, role="banner"]

include::upload/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}upload#,See Upload>>



[.cards.quiet.component-cards]
== Visualization and Interaction [[vis_and_ix]]

[.component-card]
=== Auto Grid

image::{components-path-prefix}grid/grid.png["", opts=inline, role="banner"]

include::auto-grid/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}auto-grid#,See Auto Grid>>

[.component-card]
=== Accordion

image::{components-path-prefix}accordion/accordion.png["", opts=inline, role="banner"]

include::accordion/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}accordion#,See Accordion>>


[.component-card]
=== Avatar

image::{components-path-prefix}avatar/avatar.png["", role="banner"]

include::avatar/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}avatar#,See Avatar>>


[.component-card]
=== Badge

image::{components-path-prefix}badge/badge.png["", role="banner"]

include::badge/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}badge#,See Badge>>


[.component-card]
=== Button

image::{components-path-prefix}button/button.png["", opts=inline, role="banner"]

include::button/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}button#,See Button>>

ifdef::flow[]
[.component-card.commercial]
=== Charts

image::{components-path-prefix}charts/charts.png["", opts=inline, role="banner"]

include::charts/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}charts#,See Charts>>
endif::[]

[.component-card]
=== Confirm Dialog

image::{components-path-prefix}confirm-dialog/confirm-dialog.png["", opts=inline, role="banner"]

include::confirm-dialog/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}confirm-dialog#,See Confirm Dialog>>


[.component-card]
=== Context Menu

image::{components-path-prefix}context-menu/context-menu.png["", opts=inline, role="banner"]

include::context-menu/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}context-menu#,See Context Menu>>


[.component-card.commercial]
=== Cookie Consent

image::{components-path-prefix}cookie-consent/cookie-consent.png["", opts=inline, role="banner"]

include::cookie-consent/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}cookie-consent#,See Cookie Consent>>


[.component-card.commercial]
=== CRUD

image::{components-path-prefix}crud/crud.png["", opts=inline, role="banner"]

include::crud/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}crud#,See CRUD>>


[.component-card]
=== Details

image::{components-path-prefix}details/details.png["", opts=inline, role="banner"]

include::details/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}details#,See Details>>


[.component-card]
=== Dialog

image::{components-path-prefix}dialog/dialog.png["", opts=inline, role="banner"]

include::dialog/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}dialog#,See Dialog>>


[.component-card]
=== Grid

image::{components-path-prefix}grid/grid.png["", opts=inline, role="banner"]

include::grid/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}grid#,See Grid>>


[.component-card.commercial]
=== Grid Pro

image::{components-path-prefix}grid-pro/grid-pro.png["", opts=inline, role="banner"]

include::grid-pro/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}grid-pro#,See Grid Pro>>

[.component-card]
=== Icons

image::{components-path-prefix}icons/icons.png["", opts=inline, role="banner"]

Over 600 built-in icons for business applications.

[.sr-only]
<<{components-path-prefix}icons#, See Icons>>


ifdef::flow[]
[.component-card.commercial]
=== Map [badge-flow]#Flow#

image::{components-path-prefix}map/map.png["", opts=inline, role="banner"]

include::map/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}map#,See Map>>
endif::[]

[.component-card]
=== Menu Bar

image::{components-path-prefix}menu-bar/menu-bar.png["", opts=inline, role="banner"]

include::menu-bar/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}menu-bar#,See Menu Bar>>


[.component-card]
=== Message List

image::{components-path-prefix}message-list/message-list.png["", role="banner"]

include::message-list/index.adoc[tag=description]


[.sr-only]
<<{components-path-prefix}message-list#,See Message List>>


[.component-card]
=== Notification

image::{components-path-prefix}notification/notification.png["", opts=inline, role="banner"]

include::notification/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}notification#,See Notification>>


[.component-card]
=== Popover

image::{components-path-prefix}popover/popover.png["", opts=inline, role="banner"]

include::popover/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}popover#,See Popover>>


[.component-card]
=== Progress Bar

image::{components-path-prefix}progress-bar/progress-bar.png["", opts=inline, role="banner"]

include::progress-bar/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}progress-bar#,See Progress Bar>>


[.component-card]
=== Scroller

image::{components-path-prefix}scroller/scroller.png["", opts=inline, role="banner"]

include::scroller/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}scroller#,See Scroller>>


[.component-card]
=== Side Navigation

image::{components-path-prefix}side-nav/side-nav.png["", opts=inline, role="banner"]

include::side-nav/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}side-nav#,See Side Navigation>>


ifdef::flow[]
[.component-card.commercial]
=== Spreadsheet

image::{components-path-prefix}spreadsheet/spreadsheet.png["", opts=inline, role="banner"]

include::spreadsheet/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}spreadsheet#,See Spreadsheet>>
endif::[]


[.component-card]
=== Tabs

image::{components-path-prefix}tabs/tabs.png["", opts=inline, role="banner"]

include::tabs/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}tabs#,See Tabs>>


[.component-card]
=== Tooltip

image::{components-path-prefix}tooltip/tooltip.png["", opts=inline, role="banner"]

include::tooltip/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}tooltip#,See Tooltip>>


[.component-card]
=== Tree Grid

image::{components-path-prefix}tree-grid/tree-grid.png["", opts=inline, role="banner"]

include::tree-grid/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}tree-grid#,See Tree Grid>>


[.component-card]
=== Virtual List

image::{components-path-prefix}virtual-list/virtual-list.png["", opts=inline, role="banner"]

include::virtual-list/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}virtual-list#,See Virtual List>>



[.cards.quiet.component-cards]
== Layouts [[layout_components]]


[.component-card]
=== App Layout

image::{components-path-prefix}app-layout/app-layout.png["", opts=inline, role="banner"]

include::app-layout/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}app-layout#,See App Layout>>


[.component-card.commercial]
=== Board

image::{components-path-prefix}board/board.png["", opts=inline, role="banner"]

include::board/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}board#,See Board>>


[.component-card.commercial]
=== Dashboard

image::{components-path-prefix}dashboard/dashboard.png["", opts=inline, role="banner"]

include::dashboard/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}dashboard#,See Dashboard>>


[.component-card]
=== Form Layout

image::{components-path-prefix}form-layout/form-layout.png["", opts=inline, role="banner"]

include::form-layout/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}form-layout#,See Form Layout>>


[.component-card]
=== Login

image::{components-path-prefix}login/login.png["", opts=inline, role="banner"]

include::login/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}login#,See Login>>


[.component-card]
=== Horizontal Layout

image::{components-path-prefix}horizontal-layout/horizontal-layout.png["", opts=inline, role="banner"]

include::horizontal-layout/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}horizontal-layout#,See Horizontal Layout>>


[.component-card]
=== Vertical Layout

image::{components-path-prefix}vertical-layout/vertical-layout.png["", opts=inline, role="banner"]

include::vertical-layout/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}vertical-layout#,See Vertical Layout>>


[.component-card]
=== Split Layout

image::{components-path-prefix}split-layout/split-layout.png["", opts=inline, role="banner"]

include::split-layout/index.adoc[tag=description]

[.sr-only]
<<{components-path-prefix}split-layout#,See Split Layout>>
// end::component-list[]


ifdef::flow+lit[]

[.cards.quiet.large]
== Didn't Find What You Need?


[.card]
=== Browse Vaadin Directory

image::{articles}/flow/_images/directory.svg[opts=inline, role=icon,32,32]

Vaadin Directory is a place where you can find add-ons built by the community for your applications, such as components and themes, and share your work with other community members.

[.sr-only]
https://vaadin.com/directory[Vaadin Directory]


[.card]
=== Create Components in Java

image::{articles}/flow/_images/java.svg[opts=inline, role=icon,32,32]

You can create new components by combining and extending existing ones, or by constructing them using the Element Java API in Flow.

[.sr-only]
<<{articles}/flow/create-ui/creating-components#,Create Components in Java>>


[.card]
=== Integrate Web Components

image::{articles}/flow/_images/web-components.svg[opts=inline, role=icon,32,32]

Learn how you can integrate your own Web Components or other third-party W3C-standard Web Components into Vaadin applications.

[.sr-only]
<<{articles}/flow/create-ui/web-components#,Integrate Web Components>>


[.card]
=== Contact Vaadin Team

image::{articles}/flow/_images/web-components.svg[opts=inline, role=icon,32,32]

We'd be pleased to hear more about what kind of components you want. [Please share your thoughts](https://pages.vaadin.com/contact).

[.sr-only]
<<{articles}/flow/create-ui/web-components#,Contact Vaadin Team>>

endif::[]

++++
<style>
.cards {
  --docs-cards-grid-gap: var(--docs-space-xl) var(--docs-space-xl);
}

.ds.cards .imageblock,
.component-card .imageblock {
  text-align: center;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--docs-divider-color-1);
  transition: border-color 200ms;
  background-color: #fff !important;
  border-radius: var(--docs-border-radius-l) !important;
  object-fit: contain;
}

.ds.cards .sect2:hover .imageblock.imageblock,
.component-card.sect2:hover .imageblock.imageblock {
  border-color: var(--docs-link-color);
}

.ds.cards .imageblock {
  background-color: var(--docs-surface-color-2) !important;
  padding: var(--docs-space-m);
  height: 120px;
}

.ds.cards .sect2 .imageblock {
  background-color: var(--card-color, --docs-surface-color-2) !important;
}
.ds.cards .sect2:not(:hover) .imageblock {
  border-color: var(--card-color, --docs-divider-color-1);
}

.cat-dataentry {
  --card-color: #8378FF;
}
.cat-vizandix {
  --card-color: #38C694;
}
.cat-layouts {
  --card-color: #FF7D5F;
}
.res-styling {
  --card-color: #E7F1FF;
}
.res-figma {
  --card-color: #FFE8AB;
}
.res-a11y {
  --card-color: #B4FBE1;
}
</style>
++++