Porsche Design System

Vanilla JS

Table of Contents

Form Integration Demo
Manual State Management
Native Form Submission

Porsche Design System form components can be integrated into Vanilla JS using different techniques based on your state management and form handling preferences. Each component automatically keeps its internal value in sync, similar to native form elements.

All form components support:

Manual State Management (Props + Events) using value/checked properties and change/input/blur event listeners

Native form submission using form-associated custom elements

Form Integration Demo#

A complete example of how to integrate form components with Vanilla JS can be explored here:

Source Code

View Fullscreen

Manual State Management#

While all custom form components update their internal state automatically, you can manage their values externally using the value or checked props along with input, change, and blur events. This approach allows flexible integration with any form library.

<p-input-text name="myInputText" label="Some Label"></p-input-text>

<p-text>Value: ''</p-text>

<script>
  const debugElement = document.querySelector('p-text');
  // In order to change the input value programmatically you can change the value property of the element directly: inputText.value = 'new value';
  const inputText = document.querySelector('p-input-text');

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

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

Native Form Submission#

All custom form components are form-associated custom elements that integrate seamlessly with forms. Leveraging the ElementInternals API, They will work like their native counterparts, ensuring compatibility with form behaviors.

<form>
  <p-input-text name="myInputText" label="Some Label" />
  <p-button type="submit">Submit</p-button>
</form>