Porsche Design System

Multi Select

The p-multi-select component is a versatile custom form element that facilitates the selection of multiple options.

Many of the properties closely resemble those found in the select 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 a string or number. null and undefined are not valid option values. 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="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<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>