Porsche Design System

Input Text

Table of Contents

Form
Slots

Form#

The p-input-text 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 input 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 native <input type="text" />, automatically managing its own state and including its value in form submissions through the ElementInternals API. This is convenient for smaller forms or simple submissions.

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-input-text name="myInputText" label="Some Label" indicator></p-input-text>
  <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(form);
    debugElement.innerText = `Last submitted data: ${formData.get('myInputText')}`;
  });
</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.

If you need to provide additional information or actions to the user, you can use the start and end slots. For example, you might include an icon, a unit, or an action button. Icons and text should use the contrast-medium color to avoid being mistaken for a button.

If you use a p-button-pure or a p-link-pure, a padding and margin have to be set with the exposed --ref-p-input-slotted-padding and --ref-p-input-slotted-margin CSS Variables.

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-canvas">

<p-input-text 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>
  <p-icon slot="start" name="shopping-cart" color="contrast-medium" aria-hidden="true"></p-icon>
  <p-button-pure slot="end" icon="delete" hide-label="true" class="p-(--ref-p-input-slotted-padding) m-(--ref-p-input-slotted-margin)" aria="{'aria-label': 'Delete'}"></p-button-pure>
  <span slot="message" id="some-message-id">
    Some error message with a 
    <a href="https://designsystem.porsche.com">
      link
    </a>
    .
  </span>
</p-input-text>
<script>

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