Porsche Design System

Input Number

Table of Contents

Form
Controlled
Slots

Form#

The p-input-number 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-number name="some-name" label="Some Label"></p-input-number>
  <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-number 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-number name="some-name" label="Some Label"></p-input-number>

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

  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.

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

<p-input-number 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-number>
<script>

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