> Markdown version of [Components](https://vaadin.com/docs/latest/components). Section index: [llms.txt](https://vaadin.com/docs/latest/llms.txt)

# Components

## <a id="categories-resources"></a>Categories & Resources

### <a id="data-entry"></a>Data Entry

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

[Form input components](#form_inputs)

### <a id="visualization-interaction"></a>Visualization & Interaction

Buttons, tables, menus, charts, etc.

[Visualization and interaction components](#vis_and_ix)

### <a id="layouts"></a>Layouts

Components for structuring a UI without the need for CSS.

[Layout components](#layout_components)

### <a id="styling"></a>Styling

[Image: theme editor icon]

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

[Read about how to style Vaadin components](https://vaadin.com/docs/latest/styling.md)

### <a id="figma-libraries"></a>Figma Libraries

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

[See Figma Libraries](https://vaadin.com/docs/latest/components/figma.md)

### <a id="accessibility"></a>Accessibility

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

<<<https://vaadin.com/accessibility>, Read about Vaadin Accessibility>>

## <a id="form_inputs"></a>Data Entry

### <a id="checkbox"></a>Checkbox

Checkbox is an input field representing a binary choice.

[See Checkbox](https://vaadin.com/docs/latest/components/checkbox.md)

### <a id="combo-box"></a>Combo Box

Combo Box allows the user to choose a value from a filterable list of options presented in an overlay.

[See Combo Box](https://vaadin.com/docs/latest/components/combo-box.md)

### <a id="custom-field"></a>Custom Field

Custom Field is a component for wrapping multiple components as a single field.

[See Custom Field](https://vaadin.com/docs/latest/components/custom-field.md)

### <a id="date-picker"></a>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](https://vaadin.com/docs/latest/components/date-picker.md)

### <a id="date-time-picker"></a>Date Time Picker

Date Time Picker is an input field for selecting both a date and a time.

[See Date Time Picker](https://vaadin.com/docs/latest/components/date-time-picker.md)

### <a id="email-field"></a>Email Field

Email Field is an extension of Text Field that accepts only email addresses as input.

[See Email Field](https://vaadin.com/docs/latest/components/email-field.md)

### <a id="list-box"></a>List Box

List Box allows the user to select one or more values from a scrollable list of items.

[See List Box](https://vaadin.com/docs/latest/components/list-box.md)

### <a id="number-field"></a>Number Field

Number Field is an input field that accepts only numeric input.

[See Number Field](https://vaadin.com/docs/latest/components/number-field.md)

### <a id="message-input"></a>Message Input

Message Input allows users to author and send messages.

[See Message Input](https://vaadin.com/docs/latest/components/message-input.md)

### <a id="multi-select-combo-box"></a>Multi-Select Combo Box

Multi-Select Combo Box allows the user to choose one or more values from a filterable list of options presented in an overlay.

[See Multi-Select Combo Box](https://vaadin.com/docs/latest/components/multi-select-combo-box.md)

### <a id="password-field"></a>Password Field

Password Field is an input field for entering passwords.

[See Password Field](https://vaadin.com/docs/latest/components/password-field.md)

### <a id="radio-button"></a>Radio Button

Radio Button Group allows users to select one value among multiple choices.

[See Radio Button](https://vaadin.com/docs/latest/components/radio-button.md)

### <a id="rich-text-editor"></a>Rich Text Editor

Rich Text Editor allows the user to author text that has rich formatting.

[See Rich Text Editor](https://vaadin.com/docs/latest/components/rich-text-editor.md)

### <a id="select"></a>Select

Select allows users to choose a single value from a list of options presented in an overlay.

[See Select](https://vaadin.com/docs/latest/components/select.md)

### <a id="slider"></a>Slider

Slider is an input field that lets users pick a numeric value within a range by dragging a thumb along a track. Use arrow keys for precise adjustments.

[See Slider](https://vaadin.com/docs/latest/components/slider.md)

### <a id="text-area"></a>Text Area

Text Area is an input field component that allows entry of multiple lines of text.

[See Text Area](https://vaadin.com/docs/latest/components/text-area.md)

### <a id="text-field"></a>Text Field

Text Field allows users to enter text.

[See Text Field](https://vaadin.com/docs/latest/components/text-field.md)

### <a id="time-picker"></a>Time Picker

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

[See Time Picker](https://vaadin.com/docs/latest/components/time-picker.md)

### <a id="upload"></a>Upload

Upload allows the user to upload files, giving feedback to the user during the upload process.

[See Upload](https://vaadin.com/docs/latest/components/upload.md)

## <a id="vis_and_ix"></a>Visualization and Interaction

### <a id="auto-grid"></a>Auto Grid

Auto Grid is a component for displaying tabular data based on a Java backend service.

[See Auto Grid](https://vaadin.com/docs/latest/components/auto-grid.md)

### <a id="accordion"></a>Accordion

Accordion is a vertically stacked set of expandable panels.

[See Accordion](https://vaadin.com/docs/latest/components/accordion.md)

### <a id="avatar"></a>Avatar

Avatar is a graphical representation of an object or entity, for example, a person or an organization.

[See Avatar](https://vaadin.com/docs/latest/components/avatar.md)

### <a id="badge"></a>Badge

Badges are colored text elements containing small bits of information.

[See Badge](https://vaadin.com/docs/latest/components/badge.md)

### <a id="breadcrumbs"></a>Breadcrumbs

Breadcrumbs show the user’s location within an application’s hierarchy and provide links back to higher levels.

[See Breadcrumbs](https://vaadin.com/docs/latest/components/breadcrumbs.md)

### <a id="button"></a>Button

The Button component allows users to perform actions. It comes in several different style variants and supports icons as well as text labels.

[See Button](https://vaadin.com/docs/latest/components/button.md)

### <a id="charts"></a>Charts

Charts is a feature-rich interactive charting library with a vast number of different chart types from basic plotting to complex financial charting.

[See Charts](https://vaadin.com/docs/latest/components/charts.md)

### <a id="card"></a>Card

The Card component is a versatile container for grouping related content and actions, with several customization options for layout and appearance.

[See Card](https://vaadin.com/docs/latest/components/card.md)

### <a id="confirm-dialog"></a>Confirm Dialog

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

[See Confirm Dialog](https://vaadin.com/docs/latest/components/confirm-dialog.md)

### <a id="context-menu"></a>Context Menu

Context Menu is a component that you can attach to any component to display a context menu.

[See Context Menu](https://vaadin.com/docs/latest/components/context-menu.md)

### <a id="crud"></a>CRUD

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

[See CRUD](https://vaadin.com/docs/latest/components/crud.md)

### <a id="details"></a>Details

Details is an expandable panel for showing and hiding content from the user, to make the UI less cluttered.

[See Details](https://vaadin.com/docs/latest/components/details.md)

### <a id="dialog"></a>Dialog

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

[See Dialog](https://vaadin.com/docs/latest/components/dialog.md)

### <a id="grid"></a>Grid

Vaadin Grid is a component for displaying tabular data, including various enhancements to grid renderings.

[See Grid](https://vaadin.com/docs/latest/components/grid.md)

### <a id="grid-pro"></a>Grid Pro

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

[See Grid Pro](https://vaadin.com/docs/latest/components/grid-pro.md)

### <a id="html-elements-flow"></a>HTML Elements Flow

Vaadin Flow comes with a set of components for standard HTML elements.

[See HTML Elements](https://vaadin.com/docs/latest/components/html-elements.md)

### <a id="icons"></a>Icons

Over 600 built-in icons for business applications.

[See Icons](https://vaadin.com/docs/latest/components/icons.md)

### <a id="markdown"></a>Markdown

The Markdown component renders content written in the Markdown syntax as HTML.

[See Markdown](https://vaadin.com/docs/latest/components/markdown.md)

### <a id="map-flow"></a>Map Flow

Map is a component for displaying geographical maps from various sources.

[See Map](https://vaadin.com/docs/latest/components/map.md)

### <a id="menu-bar"></a>Menu Bar

Menu Bar is a horizontal button bar with hierarchical drop-down menus.

[See Menu Bar](https://vaadin.com/docs/latest/components/menu-bar.md)

### <a id="message-list"></a>Message List

Message List allows you to show a list of messages, for example, a chat log.

[See Message List](https://vaadin.com/docs/latest/components/message-list.md)

### <a id="notification"></a>Notification

Notification is used to provide feedback to the user about activities, processes, and events in the application.

[See Notification](https://vaadin.com/docs/latest/components/notification.md)

### <a id="popover"></a>Popover

A generic overlay whose position is anchored to an element in the UI.

[See Popover](https://vaadin.com/docs/latest/components/popover.md)

### <a id="progress-bar"></a>Progress Bar

Progress Bar shows the amount of completion of a task or process.

[See Progress Bar](https://vaadin.com/docs/latest/components/progress-bar.md)

### <a id="scroller"></a>Scroller

Scroller is a container component that enables scrollable areas within the UI.

[See Scroller](https://vaadin.com/docs/latest/components/scroller.md)

### <a id="side-navigation"></a>Side Navigation

Side Navigation provides a vertical list of navigation links with support for collapsible, nested sections.

[See Side Navigation](https://vaadin.com/docs/latest/components/side-nav.md)

### <a id="spreadsheet"></a>Spreadsheet

Vaadin Spreadsheet allows displaying and interacting with the contents of an Excel file.

[See Spreadsheet](https://vaadin.com/docs/latest/components/spreadsheet.md)

### <a id="tabs"></a>Tabs

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

[See Tabs](https://vaadin.com/docs/latest/components/tabs.md)

### <a id="tooltip"></a>Tooltip

Tooltips are small pop-ups for providing additional information about other UI elements.

[See Tooltip](https://vaadin.com/docs/latest/components/tooltip.md)

### <a id="tree-grid"></a>Tree Grid

Tree Grid is a component for displaying hierarchical tabular data grouped into expandable nodes.

[See Tree Grid](https://vaadin.com/docs/latest/components/tree-grid.md)

### <a id="virtual-list"></a>Virtual List

Virtual List allows you to render a long list of items inside a scrollable container without sacrificing performance.

[See Virtual List](https://vaadin.com/docs/latest/components/virtual-list.md)

## <a id="layout_components"></a>Layouts

### <a id="app-layout"></a>App Layout

App Layout is a component for the root layout of a Vaadin application. It provides predefined areas for the navigation drawer, the header, and the view’s content.

[See App Layout](https://vaadin.com/docs/latest/components/app-layout.md)

### <a id="dashboard"></a>Dashboard

A component for building static dashboard layouts and dynamic, user-configurable dashboards.

[See Dashboard](https://vaadin.com/docs/latest/components/dashboard.md)

### <a id="form-layout"></a>Form Layout

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

[See Form Layout](https://vaadin.com/docs/latest/components/form-layout.md)

### <a id="horizontal-layout"></a>Horizontal Layout

Horizontal Layout places components side-by-side in a row.

[See Horizontal Layout](https://vaadin.com/docs/latest/components/horizontal-layout.md)

### <a id="login"></a>Login

Login is a component that contains a log-in form. You can use it to authenticate the user with a username and password.

[See Login](https://vaadin.com/docs/latest/components/login.md)

### <a id="master-detail-layout"></a>Master-Detail Layout

Master-Detail Layout is component for building UIs with a horizontally or vertically split pair consisting of a master area and a detail area that can responsively switch to an overlay.

[See Master-Detail Layout](https://vaadin.com/docs/latest/components/master-detail-layout.md)

### <a id="split-layout"></a>Split Layout

Split Layout is a component with two content areas and a draggable split handle between them.

[See Split Layout](https://vaadin.com/docs/latest/components/split-layout.md)

### <a id="vertical-layout"></a>Vertical Layout

Vertical Layout places components top-to-bottom in a column.

[See Vertical Layout](https://vaadin.com/docs/latest/components/vertical-layout.md)

## <a id="didnt-find-what-you-need"></a>Didn’t Find What You Need?

### <a id="browse-vaadin-directory"></a>Browse Vaadin Directory

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.

[Vaadin Directory](https://vaadin.com/directory)

### <a id="create-components-in-java"></a>Create Components in Java

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

[Create Components in Java](https://vaadin.com/docs/latest/flow/component-internals/basic.md)

### <a id="integrate-web-components"></a>Integrate Web Components

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

[Integrate Web Components](https://vaadin.com/docs/latest/flow/component-internals/web-components.md)