기본 코드 예시
공통 베이스라인
레이블 연결 필수
<label for>로 input과 연결하거나 aria-label/aria-labelledby를 사용해야 합니다.
오류 메시지 연결
aria-describedby로 오류 메시지를 input에 연결하고 aria-invalid="true"를 설정해야 합니다.
필수 입력 표시
required 또는 aria-required="true"로 필수 여부를 명시해야 합니다.
색상 대비 4.5:1
입력 텍스트와 배경 사이 최소 4.5:1 대비율이 필요합니다.
placeholder 단독 사용 금지
placeholder는 레이블을 대체할 수 없습니다. 항상 visible label과 함께 사용하세요.
autocomplete 속성 추가
이름, 이메일 등 개인정보 필드에 autocomplete 속성을 설정하세요.
도움말 텍스트 연결
aria-describedby로 힌트/도움말 텍스트를 연결하세요.
placeholder를 레이블로 사용 금지
포커스 시 placeholder가 사라져 사용자가 맥락을 잃습니다.
색상만으로 오류 표시 금지
빨간 테두리만으로 오류를 나타내지 마세요. 텍스트 메시지를 함께 제공하세요.
디자인 시스템별 구현
추가 체크포인트
helperText가 aria-describedby로 자동 연결
MUI TextField의 helperText는 FormHelperText로 렌더링되며 aria-describedby로 input에 자동 연결됩니다. 수동으로 id를 설정하면 충돌이 발생할 수 있습니다.
slotProps.htmlInput으로 native input 속성 전달
autoComplete, aria-required 등 HTML input 속성은 slotProps.htmlInput을 통해 네이티브 input 요소에 전달하세요. inputProps는 v7에서 deprecated입니다.
error + helperText로 오류 상태 안내
error prop이 true일 때 helperText의 색상이 오류 색으로 변경됩니다. 오류 메시지를 helperText에 제공하세요.
코드 샘플
구현 노트
- –MUI TextField는 label, input, helperText의 aria 연결(for/id, aria-describedby)을 자동으로 처리합니다.
- –slotProps.htmlInput으로 네이티브 input 속성을 전달하세요 (v7+). inputProps는 deprecated입니다.
- –error prop이 true일 때 helperText 색상이 오류 색으로 변경되며 aria-invalid가 자동 적용됩니다.
- –required prop은 label에 asterisk를 표시하고 슬롯에 aria-required를 전달합니다.