Porsche Design System

Pin Code

The p-pin-code component is optimized for entering sequences of digits. The most common use case is for entering one-time-passwords (OTP) or pin codes. The input fields allow only one digit at a time. When a digit is entered, the focus shifts automatically to the next input, until every input is filled.

A few things to note:

Only digits can be entered.

Only one digit can be entered per input.

Pressing Delete or Backspace: If the focussed input is blank and Delete/Backspace is pressed the focus transfers to the next/previous input, and clears the value of the next/previous input (if any). This avoids the need to explicitly Shift+Tab & Delete/ Tab & Backspace.

When the p-pin-code component is used within a form, it utilizes the ElementInternals API, which has limited browser support. For broader browser compatibility, consider using a controlled approach instead.

A label is a caption which informs the user what information a particular form field is asking for. The p-pin-code component can be used with or without a label, but it's recommended to keep the label visible for better accessibility whenever possible. When used without a label, it's best practice to provide a descriptive label text for screen readers.

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