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.

By default the p-segmented-control displays all options in equal size based on its largest option. If the no-wrap property is set to true, the items will be rendered inline (shrinked to their initial size) with an optional scroller.

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

<p-segmented-control label="Some Label" description="Some description">
  <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>