Select
Select allows users to choose a single value from a list of options presented in an overlay.
new tab
<vaadin-select
label="Sort by"
.items="${this.items}"
.value="${this.items[0].value}"
></vaadin-select>
The drop-down can be opened with a click, up/down arrow keys, or by typing the initial character of one of the options.
Dividers
Dividers can be used to group related options. Use dividers sparingly to avoid creating unnecessary visual clutter.
new tab
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',
},
];
Note
|
Use Combo Box for long lists
For large data sets, it’s preferable to use Combo Box instead of Select, as it allows users to filter the list of options.
|
Disabled Items
Items can be disabled. This prevents users from selecting them, while still showing that these items would be available for selection under different circumstances.
new tab
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',
},
];
Caution
|
Accessibility
Some assistive technologies might not announce disabled options.
|
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.
new tab
<vaadin-select label="Size" placeholder="Select size" .items="${this.items}"></vaadin-select>
Empty Selection Item (Flow Only)
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
.
Customizing the Empty Selection Caption
The label for the empty item is customizable.
The caption that you set replaces the placeholder for the empty selection item.
new tab
select.setEmptySelectionAllowed(true);
select.setEmptySelectionCaption("Unknown size");
Custom Item Label
When using complex values, a label can be set to represent the item value as plain text.
new tab
this.items = 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.
new tab
<!-- Use the label attribute to display full name of the person as selected value label -->
<vaadin-item value="${person.id}" label="${formatPersonFullName(person)}">
<div style="display: flex; align-items: center;">
<img
src="${person.pictureUrl}"
alt="Portrait of ${formatPersonFullName(person)}"
style="width: var(--lumo-size-m); margin-right: var(--lumo-space-s);"
/>
<div>
${formatPersonFullName(person)}
<div
style="font-size: var(--lumo-font-size-s); color: var(--lumo-secondary-text-color);"
>
${person.profession}
</div>
</div>
</div>
</vaadin-item>
Note
|
Flow-specific
When using
The same applies when using a data source that may contain null values. |
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.
new tab
<vaadin-select
label="Choose doctor"
${selectRenderer(this.renderer, this.people)}
></vaadin-select>
...
private renderer = () => html`
<vaadin-list-box>
${this.people.map(
(person) => html`
<vaadin-item value="${person.id}">
<!--
NOTE
We are using inline styles here to keep the example simple.
We recommend placing CSS in a separate style sheet and
encapsulating the styling in a new component.
-->
<div style="display: flex; align-items: center;">
<img
src="${person.pictureUrl}"
alt="Portrait of ${person.firstName} ${person.lastName}"
style="width: var(--lumo-size-m); margin-right: var(--lumo-space-s);"
/>
<div>
${person.firstName} ${person.lastName}
<div
style="font-size: var(--lumo-font-size-s); color: var(--lumo-secondary-text-color);"
>
${person.profession}
</div>
</div>
</div>
</vaadin-item>
`
)}
</vaadin-list-box>
`;
Best Practices
Don’t Use as a Menu
Select is an input field component, not a generic menu component. Use Menu Bar to create overlays for actions.
Related Components
Component | Usage recommendations |
---|---|
Better accessibility than Select, as all options are visible without user interaction. | |
Filterable list of options. Appropriate for large sets of options. Supports lazy-loading entry of custom values. | |
Scrollable inline list of options. Supports single and multi-select. | |
Overlay menus for items that trigger actions. |
F53C23C7-4798-402A-A7C9-47416795D4C5