Porsche Design System

Pin Code

Table of Contents

Form
Controlled
Copy+Paste and autocomplete

Form#

The p-pin-code component is a form-associated custom element that integrates seamlessly with forms. Leveraging the ElementInternals API, it functions like a native input, ensuring compatibility with form behaviors. However, note that browser support for this API is limited.

To ensure proper submission of the form, it's required to provide an individual name prop to the p-pin-code component, enabling the p-pin-code's value to be included in the form's data when it is submitted.

p-pin-code does not use a 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.

Last submitted data: none

Open in Stackblitz

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

<form>
  <p-pin-code label="Some Label" name="pin-code"></p-pin-code>
  <p-button type="submit">Submit</p-button>
  <p-button type="reset">Reset</p-button>
</form>

<p-text>Last submitted data: none</p-text>
<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>

Controlled#

We do not envision a lot of scenarios where you would need this level of control, however the p-pin-code can be used as a controlled component. This means it does not contain any internal state, and you got full control over its behavior. Any change of the input's values triggers a custom update event and the value is updated immediately. The prop value is an array of strings synchronized with the input's values.

Current value:

Completely filled: false

Open in Stackblitz

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

<p-pin-code label="Some Label" value=""></p-pin-code>

<p-text class="value">Current value:</p-text>
<p-text class="complete">Completely filled: false</p-text>
<script>
  const pinCode = document.querySelector('p-pin-code');
  const debugElement1 = document.querySelector('.value');
  const debugElement2 = document.querySelector('.complete');

  pinCode.addEventListener('update', (e) => {
    const { value, isComplete } = e.detail;
    e.target.value = value;
    setDebugElementsText(value, isComplete);
  });

  function setDebugElementsText(value, isComplete) {
    debugElement1.innerText = `Current value: ${value}`;
    debugElement2.innerText = `Completely filled: ${isComplete}`;
  }
</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-base">

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

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

Attention