Skip to content

Latest commit

 

History

History
35 lines (23 loc) · 922 Bytes

formfield-htmlfor-id.md

File metadata and controls

35 lines (23 loc) · 922 Bytes
Raw

Rule to enforce matching htmlFor and id on FormField and its child input, respectively (formfield-htmlfor-id)

It is necessary to associate a label with its input. This allows assistive technology to refer to the correct label when presenting a form control.

Read more about W3C Form Control Accessibility.

Rule Details

This rule aims to ensure that FormField has an htmlFor prop that matches the id prop of its child input.

Examples of incorrect code for this rule:

<FormField label="Test Input">
   <TestInput />
</FormField>

<FormField label="Test Input" htmlFor="test-input">
   <TestInput />
</FormField>

<FormField label="Test Input">
   <TestInput id="test-input" />
</FormField>

Examples of correct code for this rule:

<FormField label="Test Input" htmlFor="test-input">
  <TestInput id="test-input" />
</FormField>