add form validation to select

src/lib/select/select.element.ts

@@ -78,6 +78,9 @@ export class USASelectElement extends HTMLElement {
   @attr()
   accessor name = "";
 
+  @attr()
+  accessor required = false;
+
   #select = query("select");
   #internals = this.attachInternals();
 
@@ -86,14 +89,16 @@ export class USASelectElement extends HTMLElement {
     select.value = this.value;
     select.name = this.name;
 
-    this.#internals.setFormValue(this.value);
+    this.#syncFormState();
   }
 
   @listen("change")
   onSelectChange() {
     const select = this.#select();
 
-    this.#internals.setFormValue(select.value);
+    this.value = select.value;
+
+    this.#syncFormState();
   }
 
   @listen("usa::select::option::added")
@@ -105,4 +110,18 @@ export class USASelectElement extends HTMLElement {
     const select = this.#select();
     select.append(target.option);
   }
+
+  #syncFormState() {
+    this.#internals.setFormValue(this.value);
+
+    if (this.required && !this.value) {
+      this.#internals.setValidity(
+        { valueMissing: true },
+        "Required",
+        this.#select()
+      );
+    } else {
+      this.#internals.setValidity({});
+    }
+  }
 }

src/lib/select/select.test.ts

@@ -110,4 +110,20 @@ describe("usa-select", () => {
 
     assert.equal(value.get("example"), "third");
   });
+
+  it("should not submit when not valid", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-select name="example" required>
+          Hello World
+
+          <usa-select-option value="first">First</usa-select-option>
+          <usa-select-option value="second">Second</usa-select-option>
+          <usa-select-option value="third">Third</usa-select-option>
+        </usa-select>
+      </form>
+    `);
+
+    assert.equal(form.checkValidity(), false);
+  });
 });