MenuListbox

A MenuListbox is a standalone, always-visible list container that supports single-select and multi-select modes. It supports grouping with category headers, dividers, icons, helper text, and descriptions.

Import

React

// with @dhl-official/react-library:
import { DhlMenuListbox } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlMenuListbox } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-menu-listbox></dhl-menu-listbox>

Vue.js

// with @dhl-official/vue-library:
import { DhlMenuListbox } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlMenuListbox } from "@dhl-official/ui-libraries/vue-library"

Code

React

<DhlMenuListbox
data={[
  { label: "Urgent", value: "urgent" },
  { label: "High",   value: "high"   },
  { label: "Medium", value: "medium" },
  { label: "Low",    value: "low"    },
]}
dataAriaLabel="Priority"
onDhlChange={(e) => console.log(e.detail.value)}
/>

Angular

<dhl-menu-listbox
[data]="items"
data-aria-label="Priority"
(dhlChange)="onSelect($event)"
></dhl-menu-listbox>

Vue.js

<dhl-menu-listbox
:data="items"
data-aria-label="Priority"
@dhl-change="onSelect"
></dhl-menu-listbox>

Interactive Demo

Readme

Properties

Property	Attribute	Description	Type	Default
data	data	An optional array of items to display in the listbox.	DhlMenuListboxItemType[]	[]
dataAriaLabel	data-aria-label	An optional aria-label for the listbox, used when there is no visible label element.	string	undefined
dataAriaLabelledby	data-aria-labelledby	An optional aria-labelledby value referencing the id of an external label element.	string	undefined
dataId	id	An optional unique HTML id for the component. Used to link external labels via aria-labelledby.	string	`dhl-menu-listbox-${getRandomString()}`
dataTestid	data-testid	An optional data-testid attribute for testing.	string	undefined
multiSelect	multi-select	An optional flag to enable multi-select mode. When false (default) only one item can be selected at a time.	boolean	false
notFoundLabel	not-found-label	An optional label shown in the empty / no-results state.	string	"Item not found"
value	value	An optional selected value for single-select mode. Setting this prop initialises the selection.	string	undefined
values	values	An optional array of selected values for multi-select mode.	string[]	[]

Events

Event	Description	Type
dhlChange	Emitted when the selection changes. The detail always includes both value (first selected string) and values (full selection array).	CustomEvent<{ value: string; values: string[]; }>

Dependencies

Depends on

• dhl-selection-option

Graph

---

Built by DHL User Interface Library Team!