Form Controls
We aim to build our form control components in such a way that they provide a native-like experience to engineers. That said, there are a few things to be aware of when building forms using our controls. For specific information about the usage of individual components, please consult the component's documentation page.
Our form control components use the Element Internals API under the hood. This means that although our controls are web components, they are fully associated with the form element they are placed inside of and are collected during form submission. Form controls must be given a name property if their interface expects one. This ensures that they are properly picked up by the FormData.
To correctly use our components, and adhere to the designs and UX provided by PIE, we must ask that you add the novalidate attribute to your form elements.
This disables native browser validation. We recommend doing this because PIE leverages the pie-assistive-text component to provide error messages during form validation. This ensures that messages follow our visual design language. We strive to ensure that our own validation messages are accessible.
We leave validation implementations up to the developer, as we understand that validation requirements can vary greatly between projects. We do, however, expose the validity property that can be queried with Javascript similar to native form controls. The validity state is driven by the Constraint Validation API. This means you can pass attributes to our components the same way you would for native controls such as input elements. These can be things such as (but not limited to): required, maxlength, and pattern. When these attributes are present, the component will automatically validate the input and update the validity property accordingly similar to native controls.
Whilst client-side validation is useful for a nice user experience, you must always perform server-side validation when handling any user-submitted data. Do not trust client-side validation alone.
