Porsche Design System

Segmented Control

Table of Contents

Form
With Labels
Slots

Form#

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

In the controlled approach, the p-segmented-control 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 p-segmented-control automatically manages its own state and includes its value in form submissions through the ElementInternals API. This is convenient for smaller forms or simple submissions.

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.

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="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<form class="flex flex-col gap-fluid-sm">
  <p-segmented-control name="mySegmentedControl" 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>
  <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: ${formData.get('mySegmentedControl') || 'none'}`;
  });
</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="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

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

Slots#

Use named slots when label, description or message need markup such as a link. Do not set the corresponding host property at the same time, because properties take precedence. Named slots only accept phrasing content.

Alongside label, description and message, you can also use label-after for content that should appear after the label but is not part of the label itself, such as an external link or popover.

In disabled/loading state, slotted focusable UI elements (e.g. a) will still receive keyboard focus. Add tabindex="-1" to those UI elements.

The label-after slot is not affected by a disabled/loading state at all.

Some label with a link and a "label-after" slot.

Some Popover content with a link.

Some description with a link.Some error message with a link.

Option 1

Option 2

Option 3

Option 4

Option 5

Open in Stackblitz

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

<p-segmented-control state="error">
  <span slot="label" id="some-label-id">
    Some label with a 
    <a href="https://designsystem.porsche.com" class="underline">
      link
    </a>
     and a "label-after" slot.
  </span>
  <p-popover slot="label-after">
    Some Popover content with a 
    <a href="https://designsystem.porsche.com" class="underline">
      link
    </a>
    .
  </p-popover>
  <span slot="description" id="some-description-id">
    Some description with a 
    <a href="https://designsystem.porsche.com" class="underline">
      link
    </a>
    .
  </span>
  <span slot="message" id="some-message-id">
    Some error message with a 
    <a href="https://designsystem.porsche.com" class="underline">
      link
    </a>
    .
  </span>
  <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>
<script>

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

Attention

Attention