ember/template-require-valid-form-groups

March 19, 2026 ยท View on GitHub

Require grouped form controls to have appropriate semantics.

This rule requires appropriate semantics for grouped form controls. Correctly grouped form controls will take one of two approaches:

  • use <fieldset> + <legend> (preferred)
  • associate controls using WAI-ARIA (also acceptable)

Examples

This rule forbids the following:

<template>
  <div>
    <label for="radio-001">Chicago Zoey</label>
    <input id="radio-001" type="radio" name="prefMascot-Zoey" value="chicago zoey" />
    <label for="radio-002">Office Hours Tomster</label>
    <input id="radio-002" type="radio" name="prefMascot-OfficeHoursTomster" value="office hours tomster" />
    <label for="radio-003">A11y Zoey</label>
    <input id="radio-003" type="radio" name="prefMascot-Zoey" value="a11y zoey" />
  </div>
</template>

This rule allows the following:

<template>
  <div role="group" aria-labelledby="preferred-mascot-heading">
    <div id="preferred-mascot-heading">Preferred Mascot Version</div>
    <label for="radio-001">Chicago Zoey</label>
    <input id="radio-001" type="radio" name="prefMascot-Zoey" value="chicago zoey" />
    <label for="radio-002">Office Hours Tomster</label>
    <input id="radio-002" type="radio" name="prefMascot-OfficeHoursTomster" value="office hours tomster" />
    <label for="radio-003">A11y Zoey</label>
    <input id="radio-003" type="radio" name="prefMascot-Zoey" value="a11y zoey" />
  </div>
</template>

<template>
  <fieldset>
    <legend>Preferred Mascot Version</legend>
      <div>
        <label for="radio-001">Chicago Zoey</label>
        <input id="radio-001" type="radio" name="prefMascot-Zoey" value="chicago zoey" />
      </div>
      <div>
        <label for="radio-002">Office Hours Tomster</label>
        <input id="radio-002" type="radio" name="prefMascot-OfficeHoursTomster" value="office hours tomster" />
      </div>
      <div>
        <label for="radio-003">A11y Zoey</label>
        <input id="radio-003" type="radio" name="prefMascot-Zoey" value="a11y zoey" />
      </div>
  </fieldset>
</template>

References