[ESLint] jsx-eslint/eslint-plugin-jsx-a11y A form label must be associated with a control

<label
    className="inline-flex items-center cursor-pointer"
    htmlFor="customCheckLogin"
></label>
<input
    id="customCheckLogin"
    type="checkbox"
    className="form-checkbox border-0 rounded text-blueGray-700 ml-1 w-5 h-5 ease-linear transition-all duration-150"
/>

 

 

react 프로젝트에 관리자 대시보드 템플릿을 하나 가지고 와서 커스텀하려고 준비 중에 만난 ESLint 에러. tailwindCSS로 스타일링도 하고 있다.

label-has-associated-control

• <label> 태그가 텍스트 라벨 + 관련 있는 control로 구성되도록 강제하는 룰이다.
• 만일 이게 되지 않으면, 해결하는 방향은 두 가지가 있다.

<label> 안에 control 태그를 감싸는 방법

<label
    className="inline-flex items-center cursor-pointer"
    htmlFor="customCheckLogin"
>
<input
    id="customCheckLogin"
    type="checkbox"
    className="form-checkbox border-0 rounded text-blueGray-700 ml-1 w-5 h-5 ease-linear transition-all duration-150"
/>
</label>

<label> 태그 안에 htmlFor 속성을 추가하고 컨트롤 태그에 DOM id를 붙이는 방법

위 예시에서 htmlFor와 id를 둘다 쓰고 있다.

Reference

eslint-plugin-jsx-a11y에서 더 자세한 설명을 볼 수 있다.