Porsche Design System

Segmented Control

Table of Contents

Form
Controlled
With Labels

Form#

The p-segmented-control 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-segmented-control 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.

The p-segmented-control 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-segmented-control name="options" value="1">
    <p-segmented-control-item value="1">Option 1</p-segmented-control-item>
    <p-segmented-control-item value="2">Option 2</p-segmented-control-item>
    <p-segmented-control-item value="3">Option 3</p-segmented-control-item>
    <p-segmented-control-item value="4">Option 4</p-segmented-control-item>
    <p-segmented-control-item value="5">Option 5</p-segmented-control-item>
  </p-segmented-control>
  <button type="submit">Submit</button>
  <button type="reset">Reset</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-segmented-control component is externally controlled. Selected items trigger 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 1

Option 2

Option 3

Option 4

Option 5

Current value: 1

Open in Stackblitz

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

<p-segmented-control value="1">
  <p-segmented-control-item value="1">Option 1</p-segmented-control-item>
  <p-segmented-control-item value="2">Option 2</p-segmented-control-item>
  <p-segmented-control-item value="3">Option 3</p-segmented-control-item>
  <p-segmented-control-item value="4">Option 4</p-segmented-control-item>
  <p-segmented-control-item value="5">Option 5</p-segmented-control-item>
</p-segmented-control>

<p-text>Current value: 1</p-text>
<script>
  const segmentedControl = document.querySelector('p-segmented-control');
  const debugElement = document.querySelector('p-text');

  segmentedControl.addEventListener('update', (e) => {
    const { value } = e.detail;
    segmentedControl.value = value;
    debugElement.innerText = `Current value: ${value}`;
  });
</script>
</body>
</html>

With Labels#

Additional meta information can be displayed by setting a label on each child.

Option 1

Option 2

Option 3

Option 4

Option 5

Open in Stackblitz

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

<p-segmented-control value="1">
  <p-segmented-control-item value="1" label="Label">
    Option 1
  </p-segmented-control-item>
  <p-segmented-control-item value="2" label="Label">
    Option 2
  </p-segmented-control-item>
  <p-segmented-control-item value="3" label="Label">
    Option 3
  </p-segmented-control-item>
  <p-segmented-control-item value="4" label="Label" disabled="true">
    Option 4
  </p-segmented-control-item>
  <p-segmented-control-item value="5" label="Label">
    Option 5
  </p-segmented-control-item>
</p-segmented-control>
<script>

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

Attention