Porsche Design System

Multi Select

The p-multi-select component is a versatile custom form element that facilitates the selection of multiple options. It can be used within a form or in a controlled manner.

When the p-multi-select component is used within a form, it utilizes the ElementInternals API, which has limited browser support. For broader browser compatibility, consider using a controlled approach instead.

Many of the properties closely resemble those found in the select-wrapper and other form components (e.g. label, description, state, message, hideLabel, disabled, required & dropdownDirection). The p-multi-select offers a search field by default. When the user types in a search string, the options are reduced by matching the options text.

Options are slotted using the p-multi-select-option component. Each option needs to have an assigned value, which can be passed via an attribute or property and needs to be of type string. Initial selection states can only be achieved using the value property on the p-multi-select component (More Info). Options don't have a selected attribute or property. If an option should be visible but not selectable, it can be disabled by using the disabled attribute.

Hint: The p-multi-select utilizes the Popover API to render its dropdown on the #top-layer which enables it to be shown correctly even when used e.g. within a scroll container.

Option A

Option B

Option C

Option D

Option E

Option F

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<p-multi-select name="name" label="Some Label" description="Some description">
  <p-multi-select-option value="a">
    Option A
  </p-multi-select-option>
  <p-multi-select-option value="b">
    Option B
  </p-multi-select-option>
  <p-multi-select-option value="c">
    Option C
  </p-multi-select-option>
  <p-multi-select-option value="d">
    Option D
  </p-multi-select-option>
  <p-multi-select-option value="e">
    Option E
  </p-multi-select-option>
  <p-multi-select-option value="f">
    Option F
  </p-multi-select-option>
</p-multi-select>
<script>

</script>
</body>
</html>

Attention