Porsche Design System

Segmented Control

The p-segmented-control component is similar to the native select element while showing all available options right away.

It even behaves like a select where it can be controlled by setting the current value. However, it is not required and you could purely rely on the change event.

Visually the p-segmented-control displays all options in equal size based on its largest option.

When the p-segmented-control component is used within a form, it utilizes the ElementInternals API, which has limited browser support.

Each option needs to be rendered by using a p-segmented-control-item child component where the value property is mandatory in order to emit a useful change event.

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