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

# Select

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

**Lit** — `select-basic.ts`

```typescript
<vaadin-select
  label="Sort by"
  .items="${this.items}"
  .value="${this.items[0].value}"
></vaadin-select>
```

**Flow** — `SelectBasic.java`

```java
Select<String> select = new Select<>();
select.setLabel("Sort by");
select.setItems("Most recent first", "Rating: high to low",
        "Rating: low to high", "Price: high to low",
        "Price: low to high");
select.setValue("Most recent first");

add(select);
```

**React** — `select-basic.tsx`

```tsx
<Select label="Sort by" items={items} value={items[0].value} />
```

The drop-down menu can be opened with a click, up and down arrow keys, or by typing the initial character of one of the options.

## <a id="dividers"></a>Dividers

Dividers can be used to group related options. Use dividers sparingly to avoid creating unnecessary visual clutter.

**Lit** — `select-dividers.ts`

```typescript
private items = [
  {
    label: 'Most recent first',
    value: 'recent',
  },
  {
    component: 'hr',
  },
  {
    label: 'Rating: high to low',
    value: 'rating-desc',
  },
  {
    label: 'Rating: low to high',
    value: 'rating-asc',
  },
  {
    component: 'hr',
  },
  {
    label: 'Price: high to low',
    value: 'price-desc',
  },
  {
    label: 'Price: low to high',
    value: 'price-asc',
  },
];
```

**Flow** — `SelectDividers.java`

```java
Select<String> select = new Select<>();
select.setLabel("Sort by");
select.setItems("Most recent first", "Rating: high to low",
        "Rating: low to high", "Price: high to low",
        "Price: low to high");
select.addComponents("Most recent first", new Hr());
select.addComponents("Rating: low to high", new Hr());
select.setValue("Most recent first");

add(select);
```

**React** — `select-dividers.tsx`

```tsx
function Example() {
  const items = [
    {
      label: 'Most recent first',
      value: 'recent',
    },
    {
      component: 'hr',
    },
    {
      label: 'Rating: high to low',
      value: 'rating-desc',
    },
    {
      label: 'Rating: low to high',
      value: 'rating-asc',
    },
    {
      component: 'hr',
    },
    {
      label: 'Price: high to low',
      value: 'price-desc',
    },
    {
      label: 'Price: low to high',
      value: 'price-asc',
    },
  ];

  return <Select label="Sort by" items={items} value={items[0].value} />;
}
```

For large data sets, it’s preferable to use Combo Box instead of Select. This allows users to filter the list of options.

## <a id="disabled-items"></a>Disabled Items

Items can be disabled. This prevents users from selecting them, while still showing that the items would be available for selection under different circumstances.

**Lit** — `select-disabled.ts`

```typescript
private items = [
  {
    label: 'XS (out of stock)',
    value: 'xs',
    disabled: true,
  },
  {
    label: 'S',
    value: 's',
  },
  {
    label: 'M',
    value: 'm',
  },
  {
    label: 'L',
    value: 'l',
  },
  {
    label: 'XL',
    value: 'xl',
  },
];
```

**Flow** — `SelectDisabled.java`

```java
Select<String> select = new Select<>();
select.setLabel("Size");
select.setItems("XS (out of stock)", "S", "M", "L", "XL");
select.setItemEnabledProvider(
        item -> !"XS (out of stock)".equals(item));
select.setValue("XL");

add(select);
```

**React** — `select-disabled.tsx`

```tsx
function Example() {
  const items = [
    {
      label: 'XS (out of stock)',
      value: 'xs',
      disabled: true,
    },
    {
      label: 'S',
      value: 's',
    },
    {
      label: 'M',
      value: 'm',
    },
    {
      label: 'L',
      value: 'l',
    },
    {
      label: 'XL',
      value: 'xl',
    },
  ];

  return <Select label="Size" items={items} value={items[4].value} />;
}
```

> **Caution: Accessibility**
>
> Some assistive technologies might not announce disabled options.

## <a id="overlay"></a>Overlay

You can customize the position and the width of the Select overlay, where the list of options is rendered. You can also add CSS class names to the overlay to customize its styles.

### <a id="overlay-position"></a>Overlay Position

The overlay is shown on top of the input field by default. You can configure the placement so that it doesn’t cover the input field.

**Lit** — `select-no-vertical-overlap.ts`

```typescript
<vaadin-select label="Sort by" .items="${this.items}" no-vertical-overlap></vaadin-select>
```

**Flow** — `SelectNoVerticalOverlap.java`

```java
Select<String> select = new Select<>();
select.setNoVerticalOverlap(true);
```

**React** — `select-no-vertical-overlap.tsx`

```tsx
<Select label="Sort by" items={items} noVerticalOverlap />
```

### <a id="overlay-width"></a>Overlay Width

The overlay is as wide as the options in it and at least as wide as the input field. The overlay width can be overridden to any fixed width in cases where the default width is too narrow.

**Lit** — `select-overlay-width.ts`

```typescript
<vaadin-select
  style="--vaadin-select-overlay-width: 350px"
  label="Employee"
  .items="${this.items}"
></vaadin-select>
```

**Flow** — `SelectOverlayWidth.java`

```java
Select<Person> select = new Select<>();
select.setOverlayWidth("350px");
```

**React** — `select-overlay-width.tsx`

```tsx
<Select
  style={{ '--vaadin-select-overlay-width': '350px' }}
  label="Employee"
  items={items.value}
/>
```

## <a id="basic-features"></a>Basic Features

The following features, common to most input field components, are supported:

Label

The label is used to identify the input field. It supports plain-text content. In the Lumo theme its length is limited to the width of the field (and truncated with ellipsis), while in the Aura theme labels wrap to multiple lines. [Helpers](#helper) and [Tooltips](#tooltip) can be used to provide additional information that doesn’t fit into the label.

Visible labels are strongly recommended for all input fields. In cases where the built-in label cannot be used, an external element can be associated as the field’s label through the `aria-labelledby` attribute (`setAriaLabelledBy` in Flow). Fields without any visible label should include an invisible label for assistive technologies with the `aria-label` attribute (`setAriaLabel` in Flow).

Helper

Helpers are used to provide additional information that the user may need to enter in the field, such as format requirements or explanations of the field’s purpose below the field.

A [style variant](https://vaadin.com/docs/next/components/select/styling.md#style-variants) is available for rendering the helper above the field.

In addition to plain text, helpers can contain components and HTML elements. However, complex and interactive content is likely to have accessibility issues.

Tooltip

Tooltips are small text pop-ups displayed on hover, and on keyboard-focus. They can be used to provide additional information about a field. This can be useful in situations where an always visible [Helper](#helper) is not appropriate. Helpers are generally recommended in favor of tooltips, though, as they provide much better discoverability and mobile support. See the [Tooltip](https://vaadin.com/docs/next/components/tooltip.md) documentation for more information.

Prefix

A prefix element — rendered at the start of the field — can be used to display units, icons, and similar visual cues to the field’s purpose or format.

Prefix elements aren’t automatically announced by screen readers as part of the field. Text content (e.g., in a `Span` or `Div`) that should be announced can be associated with the field (since V25.3) using the `accessible-description-ref` attribute (`setAriaDescribedBy` in Flow). Focusable elements (e.g., buttons) are announced separately when focused.

```html
<vaadin-select accessible-description-ref="currency-prefix">
  <span slot="prefix" id="currency-prefix">$</span>
</vaadin-select>
```

```java
Span prefix = new Span("$");
field.setPrefixComponent(prefix);
field.setAriaDescribedBy(prefix);
```

Associated elements are announced in addition to the field’s helper and error message.

External & Invisible Labels (ARIA)

Visible labels are strongly recommended for all input fields. In situations where the built-in label cannot be used, an external element can be associated as the field’s label through its element `id`. Fields without any visible label should be provided an invisible label for assistive technologies like screen readers.

```html
<!-- Associates external element as label: -->
<label id="external-label">This is the label</label>
<vaadin-select accessible-name-ref="external-label">...

<!-- Invisible label for screen readers: -->
<vaadin-select accessible-name="This is the label">...
```

```java
// Associates external element as label:
NativeLabel label = new NativeLabel("This is the label");
label.setId("external-label");
field.setAriaLabelledBy("external-label");

// Invisible label for screen readers:
field.setAriaLabel("This is the label");
```

**Lit** — `select-basic-features.ts`

```typescript
<vaadin-select
  label="Label"
  helper-text="Helper text"
  placeholder="Placeholder"
  .items="${this.items}"
>
  <vaadin-tooltip slot="tooltip" text="Tooltip text"></vaadin-tooltip>
  <vaadin-icon slot="prefix" icon="vaadin:vaadin-h"></vaadin-icon>
</vaadin-select>
```

**Flow** — `SelectBasicFeatures.java`

```java
Select<String> field = new Select<>();
field.setLabel("Label");
field.setHelperText("Helper text");
field.setPlaceholder("Placeholder");
field.setTooltipText("Tooltip text");
field.setPrefixComponent(VaadinIcon.VAADIN_H.create());
```

**React** — `select-basic-features.tsx`

```tsx
<Select label="Label" helperText="Helper text" placeholder="Placeholder" items={items}>
  <Tooltip slot="tooltip" text="Tooltip text" />
  <Icon slot="prefix" icon="vaadin:vaadin-h" />
</Select>
```

## <a id="read-only-disabled"></a>Read-Only & Disabled

Fields used to display values should be set to `read-only` mode to prevent editing. Read-only fields are focusable and visible to screen readers. They can display tooltips. Their values can be selected and copied.

Fields that are currently unavailable should be `disabled`. The reduced contrast of disabled fields makes them inappropriate for displaying information. They can’t be focused or display tooltips. They’re invisible to screen readers, and their values cannot be selected and copied.

Disabled fields can be useful in situations where they can become enabled based on some user action. Consider hiding fields entirely if there’s nothing the user can do to make them editable.

**Lit** — `select-readonly-and-disabled.ts`

```typescript
<vaadin-select
  readonly
  label="Read-only"
  value="${this.items[0].value}"
  .items="${this.items}"
></vaadin-select>

<vaadin-select disabled label="Disabled"></vaadin-select>
```

**Flow** — `SelectReadonlyAndDisabled.java`

```java
Select<String> readonlyField = new Select<>();
readonlyField.setReadOnly(true);
Select<String> disabledField = new Select<>();
disabledField.setEnabled(false);
```

**React** — `select-readonly-and-disabled.tsx`

```tsx
<Select label="Read-only" value={items[0].value} items={items} readonly />

<Select label="Disabled" disabled />
```

## <a id="placeholder"></a>Placeholder

Use the placeholder feature to provide an inline text prompt for the field. Don’t create or use a separate item for this purpose.

**Lit** — `select-placeholder.ts`

```typescript
<vaadin-select label="Size" placeholder="Select size" .items="${this.items}"></vaadin-select>
```

**Flow** — `SelectPlaceholder.java`

```java
Select<String> select = new Select<>();
select.setLabel("Size");
select.setItems("XS", "S", "M", "L", "XL");
select.setPlaceholder("Select size");

add(select);
```

**React** — `select-placeholder.tsx`

```tsx
<Select label="Size" placeholder="Select size" items={items} />
```

## <a id="empty-selection-item-flow"></a>Empty Selection Item (Flow)

An empty item can be set as the first option. Use it in cases where you want to allow users to clear their selection. The value of the empty item is represented as `null`.

**Flow** — `SelectEmptySelection.java`

```java
select.setEmptySelectionAllowed(true);
```

### <a id="customizing-empty-selection-caption"></a>Customizing Empty Selection Caption

The label for the empty item is customizable. The caption that you set replaces the placeholder for the empty selection item.

**Flow** — `SelectEmptySelectionCaption.java`

```java
select.setEmptySelectionAllowed(true);
select.setEmptySelectionCaption("Unknown size");
```

## <a id="custom-item-label"></a>Custom Item Label

When using complex values, a label can be set to represent the item value as plain text.

**Lit** — `select-complex-value-label.ts`

```html
this.items = people.map((person) => ({
  label: `${person.firstName} ${person.lastName}`,
  value: `${person.id}`,
}));
```

**Lit** — `Person.ts`

```typescript
import type Address_1 from "./Address.js";
interface Person {
    firstName: string;
    lastName: string;
    email: string;
    birthday: string;
    id: number;
    subscriber: boolean;
    membership: string;
    pictureUrl: string;
    profession: string;
    address: Address_1;
    managerId?: number;
    manager: boolean;
    status: string;
    fullName?: string;
}
export default Person;
```

**Flow** — `SelectComplexValueLabel.java`

```java
Select<Person> select = new Select<>();
select.setLabel("Assignee");
// Display full name of the person as item text and selected value label
select.setItemLabelGenerator(Person::getFullName);

List<Person> people = DataService.getPeople(5);
select.setItems(people);
```

**Flow** — `Person.java`

```java
public class Person {

    @Nonnull
    private String firstName;

    @Nonnull
    private String lastName;

    @Nonnull
    private String email;

    @Nonnull
    private Date birthday;

    @Nonnull
    private Integer id;

    @Nonnull
    private Boolean subscriber;

    @Nonnull
    private String membership;

    @Nonnull
    private String pictureUrl;

    @Nonnull
    private String profession;

    @Nonnull
    private Address address;

    private Integer managerId;

    @Nonnull
    private Boolean manager;

    @Nonnull
    private String status;

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public String getFullName() {
        return firstName + " " + lastName;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public Date getBirthday() {
        return birthday;
    }

    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }

    public boolean isSubscriber() {
        return subscriber;
    }

    public void setSubscriber(boolean subscriber) {
        this.subscriber = subscriber;
    }

    public String getMembership() {
        return membership;
    }

    public void setMembership(String membership) {
        this.membership = membership;
    }

    public String getPictureUrl() {
        return pictureUrl;
    }

    public void setPictureUrl(String pictureUrl) {
        this.pictureUrl = pictureUrl;
    }

    public String getProfession() {
        return profession;
    }

    public void setProfession(String profession) {
        this.profession = profession;
    }

    public Address getAddress() {
        return address;
    }

    public void setAddress(Address address) {
        this.address = address;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    @Override
    public int hashCode() {
        return id;
    }

    @Override
    public boolean equals(Object obj) {
        if (this == obj) {
            return true;
        }
        if (!(obj instanceof Person)) {
            return false;
        }
        Person other = (Person) obj;
        return id == other.id;
    }

    public Integer getManagerId() {
        return managerId;
    }

    public void setManagerId(Integer managerId) {
        this.managerId = managerId;
    }

    public boolean isManager() {
        return manager;
    }

    public void setManager(boolean manager) {
        this.manager = manager;
    }

    public String getStatus() {
        return status;
    }

    public void setStatus(String status) {
        this.status = status;
    }
}
```

**React** — `select-complex-value-label.tsx`

```tsx
items.value = people.map((person) => ({
  label: `${person.firstName} ${person.lastName}`,
  value: `${person.id}`,
}));
```

When using custom item renderers with rich content, a label can be set to represent the item value when it’s selected.

**Lit** — `select-custom-renderer-label.ts`

```html
<!-- Use the label attribute to display full name of the person as selected value label -->
<vaadin-select-item value="${person.id}" label="${formatPersonFullName(person)}">
  <div class="person-item">
    <img
      src="${person.pictureUrl}"
      alt="Portrait of ${formatPersonFullName(person)}"
      style="width: 2.25rem;"
    />
    <span>${formatPersonFullName(person)}</span>
    <span>${person.profession}</span>
  </div>
</vaadin-select-item>
```

**Lit** — `Person.ts`

```typescript
import type Address_1 from "./Address.js";
interface Person {
    firstName: string;
    lastName: string;
    email: string;
    birthday: string;
    id: number;
    subscriber: boolean;
    membership: string;
    pictureUrl: string;
    profession: string;
    address: Address_1;
    managerId?: number;
    manager: boolean;
    status: string;
    fullName?: string;
}
export default Person;
```

**Flow** — `SelectCustomRendererLabel.java`

```java
Select<Person> select = new Select<>();
select.setLabel("Assignee");
// Use a custom renderer for items in the dropdown
select.setRenderer(SelectCustomRendererLabel.createPersonRenderer());
// Display full name of the person as selected value label
select.setItemLabelGenerator(Person::getFullName);

List<Person> people = DataService.getPeople(5);
select.setItems(people);
```

**Flow** — `Person.java`

```java
public class Person {

    @Nonnull
    private String firstName;

    @Nonnull
    private String lastName;

    @Nonnull
    private String email;

    @Nonnull
    private Date birthday;

    @Nonnull
    private Integer id;

    @Nonnull
    private Boolean subscriber;

    @Nonnull
    private String membership;

    @Nonnull
    private String pictureUrl;

    @Nonnull
    private String profession;

    @Nonnull
    private Address address;

    private Integer managerId;

    @Nonnull
    private Boolean manager;

    @Nonnull
    private String status;

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public String getFullName() {
        return firstName + " " + lastName;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public Date getBirthday() {
        return birthday;
    }

    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }

    public boolean isSubscriber() {
        return subscriber;
    }

    public void setSubscriber(boolean subscriber) {
        this.subscriber = subscriber;
    }

    public String getMembership() {
        return membership;
    }

    public void setMembership(String membership) {
        this.membership = membership;
    }

    public String getPictureUrl() {
        return pictureUrl;
    }

    public void setPictureUrl(String pictureUrl) {
        this.pictureUrl = pictureUrl;
    }

    public String getProfession() {
        return profession;
    }

    public void setProfession(String profession) {
        this.profession = profession;
    }

    public Address getAddress() {
        return address;
    }

    public void setAddress(Address address) {
        this.address = address;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    @Override
    public int hashCode() {
        return id;
    }

    @Override
    public boolean equals(Object obj) {
        if (this == obj) {
            return true;
        }
        if (!(obj instanceof Person)) {
            return false;
        }
        Person other = (Person) obj;
        return id == other.id;
    }

    public Integer getManagerId() {
        return managerId;
    }

    public void setManagerId(Integer managerId) {
        this.managerId = managerId;
    }

    public boolean isManager() {
        return manager;
    }

    public void setManager(boolean manager) {
        this.manager = manager;
    }

    public String getStatus() {
        return status;
    }

    public void setStatus(String status) {
        this.status = status;
    }
}
```

**React** — `select-custom-renderer-label.tsx`

```tsx
<Select label="Assignee">
  <SelectListBox>
    {people.value.map((person) => (
      // Use the label attribute to display full name of the person as selected value label
      <SelectItem
        value={String(person.id)}
        key={person.id}
        label={formatPersonFullName(person)}
      >
        <div className="person-item">
          <img
            src={person.pictureUrl}
            alt={`Portrait of ${formatPersonFullName(person)}`}
            style={{ width: '2.25rem' }}
          />
          <span>{formatPersonFullName(person)}</span>
          <span>{person.profession}</span>
        </div>
      </SelectItem>
    ))}
  </SelectListBox>
</Select>
```

**React** — `Person.ts`

```typescript
import type Address_1 from "./Address.js";
interface Person {
    firstName: string;
    lastName: string;
    email: string;
    birthday: string;
    id: number;
    subscriber: boolean;
    membership: string;
    pictureUrl: string;
    profession: string;
    address: Address_1;
    managerId?: number;
    manager: boolean;
    status: string;
    fullName?: string;
}
export default Person;
```

`person-item.css`

```css
.person-item {
    display: grid;
    grid-template-columns: min-content auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "avatar name"
        "avatar title";
    gap: 0 var(--vaadin-gap-s);
    align-items: center;
    line-height: 1.2;

    & > :is(vaadin-avatar, img) {
        grid-area: avatar;
    }

    & > span:first-of-type {
        grid-area: name;
    }

    & > span:last-of-type {
        grid-area: title;
        font-size: 0.875rem;
        font-weight: 400;
        color: var(--vaadin-text-color-secondary);
    }
}
```

> **Note: Flow-Specific**
>
> When using `setItemLabelGenerator()` in combination with `setEmptySelectionAllowed()`, ensure that the implementation is capable of handling null values, as the empty selection item has the value `null`.
>
> ```java
> select.setEmptySelectionAllowed(true);
> select.setItemLabelGenerator(person -> {
>   if (person == null) {
>       return "No assignee";
>   }
>   return person.getFullName();
> });
> ```
>
> The same applies when using a data source that may contain null values.

## <a id="custom-item-presentation"></a>Custom Item Presentation

Items can be rendered with rich content instead of plain text. This can be useful to provide information in a more legible fashion than appending it to the item text.

**Lit** — `select-presentation.ts`

```typescript
<vaadin-select label="Choose doctor" style="width: 15em;">
  <vaadin-select-list-box slot="overlay">
    ${this.people.map(
      (person) => html`
        <vaadin-select-item value="${person.id}">
          <div class="person-item">
            <vaadin-avatar
              .img="${person.pictureUrl}"
              .name="${`${person.firstName} ${person.lastName}`}"
            ></vaadin-avatar>
            <span>${person.firstName} ${person.lastName}</span>
            <span>${person.profession}</span>
          </div>
        </vaadin-select-item>
      `
    )}
  </vaadin-select-list-box>
</vaadin-select>
```

**Flow** — `SelectPresentation.java`

```java
Select<Person> select = new Select<>();
select.setWidth("15em");
select.setLabel("Choose doctor");
select.setRenderer(new ComponentRenderer<>(person -> {
    Avatar avatar = new Avatar(person.getFullName(),
            person.getPictureUrl());
    Span name = new Span(person.getFullName());
    Span profession = new Span(person.getProfession());

    Div personItem = new Div(avatar, name, profession);
    personItem.addClassName("person-item");
    return personItem;
}));
select.setItems(items);
add(select);
```

**React** — `select-presentation.tsx`

```tsx
<Select label="Choose doctor" style={{ width: '15em' }}>
  <SelectListBox>
    {people.value.map((person) => (
      <SelectItem value={String(person.id)} key={person.id}>
        <div className="person-item">
          <Avatar img={person.pictureUrl} name={`${person.firstName} ${person.lastName}`} />
          <span>
            {person.firstName} {person.lastName}
          </span>
          <span>{person.profession}</span>
        </div>
      </SelectItem>
    ))}
  </SelectListBox>
</Select>
```

`person-item.css`

```css
.person-item {
    display: grid;
    grid-template-columns: min-content auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "avatar name"
        "avatar title";
    gap: 0 var(--vaadin-gap-s);
    align-items: center;
    line-height: 1.2;

    & > :is(vaadin-avatar, img) {
        grid-area: avatar;
    }

    & > span:first-of-type {
        grid-area: name;
    }

    & > span:last-of-type {
        grid-area: title;
        font-size: 0.875rem;
        font-weight: 400;
        color: var(--vaadin-text-color-secondary);
    }
}
```

## <a id="best-practices"></a>Best Practices

### <a id="set-a-default-value"></a>Set a Default Value

Where applicable, set the most common choice as the default value.

### <a id="dont-use-as-a-menu"></a>Don’t Use as a Menu

Select is an input field component, not a generic menu component. Use [Menu Bar](https://vaadin.com/docs/next/components/menu-bar.md) to create overlays for actions.

## <a id="related-components"></a>Related Components

| Component                                                                     | Usage Recommendation                                                                                             |
| ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| [Radio Button Group](https://vaadin.com/docs/next/components/radio-button.md) | Better accessibility than Select, as all options are visible without user interaction.                           |
| [Combo Box](https://vaadin.com/docs/next/components/combo-box.md)             | Filterable list of options. Appropriate for large sets of options. Supports lazy-loading entry of custom values. |
| [List Box](https://vaadin.com/docs/next/components/list-box.md)               | Scrollable inline list of options. Supports single and multi-select.                                             |
| [Menu Bar](https://vaadin.com/docs/next/components/menu-bar.md)               | Overlay menus for items that trigger actions.                                                                    |

`F53C23C7-4798-402A-A7C9-47416795D4C5`