KRDS React Form 컴포넌트 - Input, Select, 자동 접근성 연결

React로 KRDS 폼 만들 때 제일 귀찮은 거 뭐예요?

저는 label이랑 input 연결하는 거요. htmlFor 쓰고, id 만들고, aria-describedby 연결하고... 매번 같은 걸 반복해요.

에러 메시지도 그래요. 에러 나면 빨갛게 바꾸고, aria-invalid 넣고, role="alert" 넣고. 빼먹으면 공공기관 웹접근성 검수에서 걸려요.

HANUI는 이거 자동으로 해줘요.

FormField - 모든 걸 연결해주는 컨테이너

이게 렌더링되면:

React.useId()로 유니크 ID 자동 생성하고, label과 input 연결하고, 에러 메시지에 role="alert" 넣고. 다 알아서 해요.

status 속성 - 에러/성공/정보

status에 따라 색상이 자동으로 바뀌어요:

• error: 빨강 + X 아이콘
• success: 초록 + 체크 아이콘
• info: 파랑 + i 아이콘

Input - 사이즈, variant, 기능들

사이즈

KRDS 기준이에요. 공공기관 UI는 보통 lg 많이 써요.

variant

clearable - 지우기 버튼

값이 있으면 X 버튼이 생겨요. 모바일에서 유용해요.

비밀번호 토글

type="password"면 눈 아이콘이 자동으로 붙어요. 클릭하면 비밀번호 보이고 안 보이고.

addon

아이콘이나 단위 같은 거 붙일 때 써요.

Select - 드롭다운

Radix UI 기반이라 키보드 네비게이션, 스크린리더 다 돼요.

FormField와 함께

FormField 안에 넣으면 id, status, disabled 다 자동 연결돼요.

실전 예제 - 회원가입 폼

react-hook-form과 연동

register() 그대로 쓰면 돼요.

정리

컴포넌트	역할
FormField	컨테이너, Context 제공
FormLabel	레이블, htmlFor 자동 연결
FormError	에러 메시지, role="alert" 자동
FormHelperText	도움말, 상태별 색상 자동
Input	입력 필드, 다양한 기능
Select	드롭다운, Radix 기반

접근성 속성 신경 안 써도 돼요. FormField로 감싸면 다 알아서 연결돼요.

설치

---

HANUI 시리즈:

• HANUI 오픈소스 공개
• shadcn 스타일로 KRDS 만들기
• Before/After 비교
• Button 딥다이브
• 접근성
• KRDS 디자인 토큰
• Form 컴포넌트 ← 현재 글

관련 링크:

• HANUI — KRDS 기반 React 디자인 시스템
• claude-settings — Claude Code 슬래시 커맨드 모음