Porsche Design System

Select

Table of Contents

Basic example without preselection
Slotted images
Form
Controlled
Set Value
With optgroups

Basic example without preselection#

To ensure the user makes a conscious choice, use the initial value undefined of the value property. If you want to give the user the choice to deselect the current option, you can provide an option without a value <p-select-option></p-select-option>. If you don't want the user to be able to deselect the current option, but still want to show a placeholder text you can set the option disabled like this <p-select-option disabled>Please choose an option</p-select-option>.

Last submitted data: none

Open in Stackblitz

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

<p-checkbox label="Required" id="required" name="required" checked="true"></p-checkbox>
<p-checkbox label="Allow deselection" id="deselection" name="deselection"></p-checkbox>

<form>
  <p-select name="options" label="Some Label" required>
    <p-select-option value="1">Option 1</p-select-option>
    <p-select-option value="2">Option 2</p-select-option>
    <p-select-option value="3">Option 3</p-select-option>
  </p-select>
  <p-button type="submit">Submit</p-button>
</form>

<p-text>Last submitted data: none</p-text>
<script>
  const select = document.querySelector('p-select');
  const required = document.querySelector('#required');
  const deselection = document.querySelector('#deselection');

  required.addEventListener('update', (e) => {
    select.toggleAttribute('required', e.detail.checked);
  });

  deselection.addEventListener('update', (e) => {
    if (e.detail.checked) {
      select.prepend(document.createElement('p-select-option'));
    } else {
      document.querySelector('p-select-option:not([value])').remove();
    }
  });

  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: ${formData.get('options')}`;
  });
</script>
</body>
</html>

Slotted images#

In order to show an icon for each option, you can optionally slot an img tag within the p-select-option. Be aware that the p-select-option can only contain a #text and an img node.

718

911

taycan

macan

cayenne

panamera

Open in Stackblitz

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

<p-select name="options" label="Some Label" description="Some description">
  <p-select-option value="718">
    <img src="assets/718.png" />
    718
  </p-select-option>
  <p-select-option value="911">
    <img src="assets/911.png" />
    911
  </p-select-option>
  <p-select-option value="taycan">
    <img src="assets/taycan.png" />
    taycan
  </p-select-option>
  <p-select-option value="macan">
    <img src="assets/macan.png" />
    macan
  </p-select-option>
  <p-select-option value="cayenne">
    <img src="assets/cayenne.png" />
    cayenne
  </p-select-option>
  <p-select-option value="panamera">
    <img src="assets/panamera.png" />
    panamera
  </p-select-option>
</p-select>
<script>

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

Form#

The p-select component is a form-associated custom element that integrates seamlessly with forms. Leveraging the ElementInternals API, it functions similar to a native select, ensuring compatibility with form behaviors. However, note that browser support for this API is limited.

When used within a form element, it's required to provide a name attribute to the p-select component. This attribute establishes the link between the component and the form, enabling the selected value to be included in the form's data when it's submitted.

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

Last submitted data: none

Open in Stackblitz

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

<form>
  <p-select name="options" label="Some Label" value="a">
    <p-select-option value="a">Option A</p-select-option>
    <p-select-option value="b">Option B</p-select-option>
    <p-select-option value="c">Option C</p-select-option>
    <p-select-option value="d">Option D</p-select-option>
    <p-select-option value="e">Option E</p-select-option>
    <p-select-option value="f">Option F</p-select-option>
  </p-select>
  <p-button type="submit">Submit</p-button>
  <p-button type="reset">Reset</p-button>
</form>

<p-text>Last submitted data: none</p-text>
<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: ${formData.get('options') || 'none'}`;
  });
</script>
</body>
</html>

Controlled#

In the controlled approach, the p-select component is externally controlled. Selecting an option triggers a custom update event, allowing you to use the updated value. Internally, the value will be updated automatically but can be overwritten by passing in a new value.

Option A

Option B

Option C

Option D

Option E

Option F

Selected values: a

Open in Stackblitz

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

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

<p-text>Selected value: a</p-text>
<script>
  const debugElement = document.querySelector('p-text');
  const select = document.querySelector('p-select');

  select.addEventListener('update', (e) => {
    e.target.value = e.detail.value;
    setDebugText(e.detail.value);
  });

  function setDebugText(value) {
    debugElement.innerText = `Selected value: ${value}`;
  }
</script>
</body>
</html>

Set Value#

The p-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 a string that represent the selected option value.

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

<p-text-field-wrapper label="Value:"><input name="input-value" type="text" placeholder="e.g. 1" /></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-select name="options" label="Some Label" value="1">
  <p-select-option value="1">Option 1</p-select-option>
  <p-select-option value="2">Option 2</p-select-option>
  <p-select-option value="3">Option 3</p-select-option>
</p-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 select = document.querySelector('p-select');

  select.addEventListener('update', () => {
    input.value = select.value;
  });

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

  document.querySelector('#btn-reset').addEventListener('click', () => {
    input.value = '';
    select.value = '1';
  });

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

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

  function addOption() {
    const child = document.createElement('p-select-option');
    child.innerText = `Option ${select.children.length + 1}`;
    child.setAttribute('value', `${select.children.length + 1}`);
    select.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-base">

<p-select name="options" label="Some Label" description="Some description">
  <p-optgroup label="Some optgroup label 1">
    <p-select-option value="a">
      Option A
    </p-select-option>
    <p-select-option value="b">
      Option B
    </p-select-option>
    <p-select-option value="c">
      Option C
    </p-select-option>
    <p-select-option value="d">
      Option D
    </p-select-option>
    <p-select-option value="e">
      Option E
    </p-select-option>
    <p-select-option value="f">
      Option F
    </p-select-option>
  </p-optgroup>
  <p-optgroup label="Some optgroup label 2">
    <p-select-option value="g">
      Option G
    </p-select-option>
    <p-select-option value="h">
      Option H
    </p-select-option>
    <p-select-option value="i">
      Option I
    </p-select-option>
  </p-optgroup>
</p-select>
<script>

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

Attention