Porsche Design System

Multi Select

Table of Contents

Form
Set Value
With optgroups

Form#

The p-multi-select can be integrated into a form in two ways: controlled or uncontrolled, depending on your needs.

In the controlled approach, the select state is externally managed using the value property and change event to keep it in sync with your application logic. This approach is ideal for complex forms or when using a form library. Note that the component will still always update its internal value automatically when interacted with.

In the uncontrolled approach, the select behaves similar to a native <select multiple>, automatically managing its own state and including its value in form submissions through the ElementInternals API. This is convenient for smaller forms or simple submissions.

p-multi-select does not use a native select internally. As a result, it lacks access to native ValidityState properties and validationMessage, and it cannot display the native validation popover. This means validation behavior and error display will need to be implemented separately if required.

For more details on form integration, refer to the Form section in the developing documentation for your framework of choice, or find a full form integration example in our examples repository.

Open in Stackblitz

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

<form class="flex flex-col gap-fluid-sm">
  <p-multi-select name="myMultiSelect" label="Some Label">
    <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>
  <div class="flex gap-fluid-sm">
    <p-button type="submit">Submit</p-button>
    <p-button type="reset">Reset</p-button>
  </div>
  <p-text>Last submitted data: </p-text>
</form>
<script>
  const debugElement = document.querySelector('p-text');
  const form = document.querySelector('form');
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    debugElement.innerText = `Last submitted data: ${Array.from(formData.values()).join(', ') || 'none'}`;
  });
</script>
</body>
</html>

Set Value#

The p-multi-select component behaves like regular form elements. It updates its value automatically based on user choices, but can also be changed manually by using the value property. This property takes an array of strings that represent the selected option values.

Set Value

Reset value

Option 1

Option 2

Option 3

Add option

Remove last option

Open in Stackblitz

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

<p-text-field-wrapper label="Value:"><input name="input-value" type="text" placeholder="e.g. 1,2" /></p-text-field-wrapper>
<p-button id="btn-input-value" type="button" compact="true">Set Value</p-button>
<p-button id="btn-reset" type="button" compact="true">Reset value</p-button>

<p-multi-select name="options" label="Some Label">
  <p-multi-select-option value="1">Option 1</p-multi-select-option>
  <p-multi-select-option value="2">Option 2</p-multi-select-option>
  <p-multi-select-option value="3">Option 3</p-multi-select-option>
</p-multi-select>

<p-button id="btn-add" type="button" compact="true">Add option</p-button>
<p-button id="btn-remove" type="button" compact="true">Remove last option</p-button>
<script>
  const input = document.querySelector('input');
  const multiSelect = document.querySelector('p-multi-select');

  multiSelect.addEventListener('change', (e) => {
    input.value = multiSelect.value.join(',');
  });

  document.querySelector('#btn-input-value').addEventListener('click', () => {
    multiSelect.value = input.value.split(',');
  });

  document.querySelector('#btn-reset').addEventListener('click', () => {
    multiSelect.value = [];
  });

  document.querySelector('#btn-add').addEventListener('click', () => {
    addOption();
  });

  document.querySelector('#btn-remove').addEventListener('click', () => {
    if (multiSelect.children.length > 0) {
      multiSelect.lastChild.remove();
    }
  });

  function addOption() {
    const child = document.createElement('p-multi-select-option');
    child.innerText = `Option ${multiSelect.children.length + 1}`;
    child.setAttribute('value', `${multiSelect.children.length + 1}`);
    multiSelect.append(child);
  }
</script>
</body>
</html>

With optgroups#

Option A

Option B

Option C

Option D

Option E

Option F

Option G

Option H

Option I

Open in Stackblitz

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

<p-multi-select name="options" label="Some Label">
  <p-optgroup label="Some optgroup label 1">
    <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-optgroup>
  <p-optgroup label="Some optgroup label 2">
    <p-multi-select-option value="g">
      Option G
    </p-multi-select-option>
    <p-multi-select-option value="h">
      Option H
    </p-multi-select-option>
    <p-multi-select-option value="i">
      Option I
    </p-multi-select-option>
  </p-optgroup>
</p-multi-select>
<script>

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

Attention