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

# Components

## <a id="form-inputs"></a>Form Inputs

### <a id="input-fields"></a>Input Fields

Input field components have common features such as label, helper text, disabled and required states, and more. [See Input Fields](https://vaadin.com/docs/v14/ds/components/input-fields.md)

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

Checkbox is an input field representing a binary choice. [See Checkbox](https://vaadin.com/docs/v14/ds/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/v14/ds/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/v14/ds/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/v14/ds/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/v14/ds/components/date-time-picker.md)

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

Email Field, an extension of Text Field, only accepts email addresses as input. [See Email Field](https://vaadin.com/docs/v14/ds/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/v14/ds/components/list-box.md)

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

Number Field sports many of the same features as Text Field but only accepts numeric input. [See Number Field](https://vaadin.com/docs/v14/ds/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/v14/ds/components/message-input.md)

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

Password Field is an input field for entering passwords. [See Password Field](https://vaadin.com/docs/v14/ds/components/password-field.md)

### <a id="radio-button"></a>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](https://vaadin.com/docs/v14/ds/components/radio-button.md)

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

Rich Text Editor is an input field for entering rich text. [See Rich Text Editor](https://vaadin.com/docs/v14/ds/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/v14/ds/components/select.md)

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

Text Area is an input field component for multi-line text input. [See Text Area](https://vaadin.com/docs/v14/ds/components/text-area.md)

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

Text Field allows the user to input and edit text. [See Text Field](https://vaadin.com/docs/v14/ds/components/text-field.md)

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

Time Picker is an input field for entering or selecting a specific time. [See Time Picker](https://vaadin.com/docs/v14/ds/components/time-picker.md)

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

Upload is a component for uploading one or more files. [See Upload](https://vaadin.com/docs/v14/ds/components/upload.md)

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

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

Accordion is a vertically stacked set of expandable panels. [See Accordion](https://vaadin.com/docs/v14/ds/components/accordion.md)

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

Avatar is a graphical representation of an object or entity, for example a person or an organisation. [See Avatar](https://vaadin.com/docs/v14/ds/components/avatar.md)

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

Badges are colored text elements containing small bits of information. [See Badge](https://vaadin.com/docs/v14/ds/components/badge.md)

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

The Button component allows users to perform actions. [See Button](https://vaadin.com/docs/v14/ds/components/button.md)

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

Feature-rich interactive graph library that answers the data visualization needs of modern web applications. [See Charts](https://vaadin.com/docs/v14/ds/components/charts.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/v14/ds/components/crud.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/v14/ds/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/v14/ds/components/context-menu.md)

### <a id="cookie-consent"></a>Cookie Consent

Cookie Consent aims to help you comply with privacy laws such as GDPR and CCPA. [See Cookie Consent](https://vaadin.com/docs/v14/ds/components/cookie-consent.md)

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

The Details component is an expandable panel for showing and hiding content from the user to make the UI less crowded. [See Details](https://vaadin.com/docs/v14/ds/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/v14/ds/components/dialog.md)

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

Grid is a component for showing tabular data. [See Grid](https://vaadin.com/docs/v14/ds/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/v14/ds/components/grid-pro.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/v14/ds/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/v14/ds/components/message-list.md)

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

Notifications are used to provide feedback to the user. [See Notification](https://vaadin.com/docs/v14/ds/components/notification.md)

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

Progress Bar shows the completion status of a task or process. [See Progress Bar](https://vaadin.com/docs/v14/ds/components/progress-bar.md)

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

Scroller is a component container for creating scrollable areas in the UI. [See Scroller](https://vaadin.com/docs/v14/ds/components/scroller.md)

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

Tabs are used to organize and group content into sections that the user can navigate between. [See Tabs](https://vaadin.com/docs/v14/ds/components/tabs.md)

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

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

App Layout is a component for building common application layouts. [See App Layout](https://vaadin.com/docs/v14/ds/components/app-layout.md)

### <a id="basic-layouts"></a>Basic Layouts

Vaadin features two basic layout components: Vertical Layout and Horizontal Layout. [See Basic Layouts](https://vaadin.com/docs/v14/ds/components/basic-layouts.md)

### <a id="board"></a>Board

Board is a powerful and easy to use layout element for building responsive views. [See Board](https://vaadin.com/docs/v14/ds/components/board.md)

### <a id="form-layout"></a>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](https://vaadin.com/docs/v14/ds/components/form-layout.md)

### <a id="login"></a>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](https://vaadin.com/docs/v14/ds/components/login.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/v14/ds/components/split-layout.md)