Porsche Design System

Pin Code

Table of Contents

Form
Copy+Paste and autocomplete

Form#

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

In the controlled approach, the input 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 input behaves similar to a single native <input type="text" />, automatically managing its own state and including its value in form submissions through the ElementInternals API.

p-pin-code does not use a single native input internally. As a result, it 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="auto">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<form class="flex flex-col gap-fluid-sm">
  <p-pin-code name="myPinCode" label="Some Label"></p-pin-code>
  <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(e.target);
    debugElement.innerText = `Last submitted data: ${Array.from(formData.values()).join() || 'none'}`;
  });
</script>
</body>
</html>

Copy+Paste and autocomplete#

By default, only one input can be changed at a time. The p-pin-code component also supports copying and pasting a value and OTP auto-suggestion on mobile.

The p-pin-code component performs basic validation of the pasted value:

If the pasted string is too long the p-pin-code attempts to fill in the other inputs.

If the pasted value contains whitespaces, these will be removed.

If the value contains other characters than digits, the value can not be pasted.

Try copy+paste 1234 into any of the inputs in the example below.

Open in Stackblitz

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

<p-pin-code label="Some label"></p-pin-code>
<script>

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

Attention