SGDS Form Validation Pattern

SGDS form components integrate with the browser's ElementInternals API so they behave like native HTML form controls — they participate in <form> submission, FormData, and constraint validation automatically.

Prerequisites

See sgds-components-setup for installation and framework integration.

All form components must be placed inside a <form> element and given a name attribute to participate in form submission.

Quick Decision Guide

Show native HTML validation messages? → Add hasFeedback to each form component

Prevent submit when fields are invalid? → Built-in — no extra code needed

Read submitted field values? → Use new FormData(event.target) in the submit handler

Disable SGDS validation per component? → noValidate prop on <sgds-input> or <sgds-textarea> (others WIP)