JSFiddle - React, Tailwind, and code Playground

HTML

<form>+
  <details>
    <summary>Select multiple</summary>

    <div class="fields">
      <label for="a1">Test Label a1<input name="test" value="a1" type="checkbox" id="a1"></label>
      <label for="a2">Test Label a2<input name="test" value="a2" type="checkbox" id="a2"></label>
      <label for="a3">Test Label a3<input name="test" value="a3" type="checkbox" id="a3"></label>
      <label for="a4">Test Label a4<input name="test" value="a4" type="checkbox" id="a4"></label>
      <label for="a5">Test Label a5<input name="test" value="a5" type="checkbox" id="a5"></label>
      <label for="a6">Test Label a6<input name="test" value="a6" type="checkbox" id="a6"></label>
      <label for="a7">Test Label a7<input name="test" value="a7" type="checkbox" id="a7"></label>
      <label for="a8">Test Label a8<input name="test" value="a8" type="checkbox" id="a8"></label>
      <label for="a9">Test Label a9<input name="test" value="a9" type="checkbox" id="a9"></label>
      <label for="a10">Test Label a10<input name="test" value="a10" type="checkbox" id="a10"></label>
      <label for="a11">Test Label a11<input name="test" value="a11" type="checkbox" id="a11"></label>
      <label for="a12">Test Label a12<input name="test" value="a12" type="checkbox" id="a12"></label>
      <label for="a13">Test Label a13<input name="test" value="a13" type="checkbox" id="a13"></label>
      <label for="a15">Test Label a15<input name="test" value="a15" type="checkbox" id="a15"></label>
      <label for="a16">Test Label a16<input name="test" value="a16" type="checkbox" id="a16"></label>
      <label for="a17">Test Label a17<input name="test" value="a17" type="checkbox" id="a17"></label>
      <label for="a18">Test Label a18<input name="test" value="a18" type="checkbox" id="a18"></label>
      <label for="a19">Test Label a19<input name="test" value="a19" type="checkbox" id="a19"></label>
    </div>
  </details>
  <input type="submit">
</form>

<div id="output"></div>

CSS

.fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#output {
  padding: 2rem;
}

JavaScript

const form = document.querySelector("form");

form.addEventListener("submit", e => {
	e.preventDefault();
  
  const formData = new FormData(form);
  const search = new URLSearchParams(formData);
  document.getElementById("output").innerText = search.toString();
})