# ember/template-require-valid-form-groups

<!-- end auto-generated rule header -->

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:

```gjs
<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:

```gjs
<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>
```

```gjs
<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

- [Grouping Controls](https://www.w3.org/WAI/tutorials/forms/grouping/)
- [The Field Set element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset)