Porsche Design System

Input Password

The p-input-password component enables secure password entry by obscuring the typed characters. Displayed as a one-line plain text editor, it ensures the password remains hidden to protect user privacy. Additionally, the component includes a toggle button that allows users to reveal the password in clear text when needed, offering both security and convenience.

A label is a caption which informs the user what information a particular form field is asking for. The p-input-password 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 mandatory to provide a descriptive label text for screen readers.

While a placeholder is optional but recommended to be set whenever bits of example content or hints shall be shown to give the user visual cues to fill out the form.

Open in Stackblitz

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

<p-input-password label="Some label" name="Some name" toggle="true"></p-input-password>
<script>

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