Description
Add a new sample demonstrating the correct use of id on <input> matching the for attribute in <label>.
Current Input Group samples use a <label for="..."> but the corresponding <input> does not have an id, only a name. This breaks screen reader behavior, since for must point to a matching id, not name.
This causes labels to go unannounced in screen readers like JAWS and NVDA, and fails HTML validation checks.
Why Needed
- Proper
for and id pairing is required for screen readers to associate labels with inputs.
- Missing
id causes major accessibility issues and leads to confusion for users with assistive tech.
- HTML validators will raise warnings or errors.
Recommendations
- Include documentation explaining.