Porsche Design System

Input Password

Table of Contents

Show password toggle button
Form
Controlled
Slots

Show password toggle button#

If you want to show the password toggle button, you can pass toggle="true".

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>

Form#

The p-input-password 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.

Last submitted data:

Open in Stackblitz

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

<form>
  <p-input-password name="some-name" label="Some Label"></p-input-password>
  <p-button type="submit">Submit</p-button>
  <p-button type="reset">Reset</p-button>
</form>

<p-text>Last submitted data: </p-text>
<script>
  const debugElement = document.querySelector('p-text');
  const form = document.querySelector('form');
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    debugElement.innerText = `Last submitted data: ${formData.get('some-name')}`;
  });
</script>
</body>
</html>

Controlled#

In the controlled approach, the p-input-password value is externally managed. While the internal value will be updated automatically, you can use the input, change or blur event to update the external state.

Value:

Open in Stackblitz

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

<p-input-password name="some-name" label="Some Label"></p-input-password>

<p-text>Value: ''</p-text>
<script>
  const debugElement = document.querySelector('p-text');
  const textarea = document.querySelector('p-input-password');

  textarea.addEventListener('input', (e) => {
    e.target.value = e.detail.target.value;
    setDebugText(e.detail.target.value);
  });

  function setDebugText(value) {
    debugElement.innerText = `Value: ${value}`;
  }
</script>
</body>
</html>

Slots#

Sometimes it's useful to be able to render markup (e.g. an anchor tag) for label, description or message. Therefore, a named slot can be used. Make sure not to define the corresponding property on the host element when a named slot is used (because a property definition is preferred over a named slot). For named slots only phrasing content is allowed.

Some label with a link.Some description with a link.Some error message with a link.

Open in Stackblitz

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

<p-input-password state="error">
  <span slot="label" id="some-label-id">
    Some label with a 
    <a href="https://designsystem.porsche.com">
      link
    </a>
    .
  </span>
  <span slot="description" id="some-description-id">
    Some description with a 
    <a href="https://designsystem.porsche.com">
      link
    </a>
    .
  </span>
  <span slot="message" id="some-message-id">
    Some error message with a 
    <a href="https://designsystem.porsche.com">
      link
    </a>
    .
  </span>
</p-input-password>
<script>

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