Porsche Design System

Switch

The p-switch component is a control that is used to quickly switch between two possible states. A switch is only used for these binary actions that occur immediately after the user “flips the switch”. Commonly it is used for “on/off” state.

It is a controlled component. This means it does not contain any internal state, and you got full control over its behavior.

The p-switch component can be used with a visible or hidden label, but it's recommended to keep the label visible for better accessibility whenever possible. A label is a caption which informs the user which action is followed by interaction. When used with hidden label, it's best practice to provide a descriptive label text for screen readers.

You can use native click, focus, focusin, blur and focusout events on the p-switch.

Some label

Open in Stackblitz

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

<p-switch>
  Some label
</p-switch>
<script>
  const pSwitch = document.querySelector("p-switch");
  pSwitch.addEventListener('update', (e) => e.target.checked = e.detail.checked);
</script>
</body>
</html>