FormField

한눈에#

라벨·컨트롤·설명/오류를 묶고 htmlFor/aria-describedby/aria-invalid 배선을 자동화합니다 — id를 자동 생성해 라벨과 단일 자식 컨트롤에 양쪽으로 주입합니다.

이메일

회사 메일 주소를 입력하세요.

• 라벨·설명·오류 묶음
• htmlFor·aria 자동 배선
• id 자동 주입
• Tier 1 필드 오류

error가 있으면 description이 숨고 role=alert로 노출 + 자식에 aria-invalid 자동 주입

사용 시점#

라벨·설명·오류 배선이 붙는 단일 컨트롤을 감싸면 FormField — 배선이 불필요하거나 폼 전체 메시지면 다른 컴포넌트입니다.

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

FormField를 직접 조작해 보세요

속성·테마·토큰을 바꾸고 React·Flutter 코드를 확인하는 풀스크린 빌더로 엽니다.

빌더 열기→

플레이그라운드는 넓은 작업 영역이 필요해 웹·태블릿에서 편집할 수 있어요.

변형#

이름 *

자기소개

200자 이내로 작성하세요.

크기#

고정 크기가 없는 유동 레이아웃입니다 — 컨트롤 폭을 따라가며, 라벨은 body-2 미디엄, 설명/오류는 caption 크기입니다.

상태#

비밀번호

8자 이상이어야 합니다.

error가 있으면 description은 숨고 오류가 role="alert"로 노출됩니다. 컨트롤의 aria-describedby도 오류 쪽으로 전환되고, 단일 자식 컨트롤에는 aria-invalid="true"가 자동 주입됩니다. 보더 색은 컨트롤 자신의 invalid prop 책임입니다 — 함께 넘기세요.

Props#

접근성#

• 자식에 id 전달 패턴 — 단일 요소 자식에 id(미보유 시)와 aria-describedby를 자동 주입해 라벨·설명·오류가 모두 배선됩니다
• 자식이 여럿이면 주입하지 않습니다 — htmlFor + 자식 id로 직접 배선하세요
• 자식의 기존 aria-describedby는 덮지 않고 병합합니다
• 오류는 role="alert"로 등장 즉시 스크린리더에 공지됩니다
• 검증 ARIA 자동 주입 — 단일 자식 컨트롤에 error 시 aria-invalid="true", required 시 aria-required="true"를 주입합니다(자식이 직접 준 값은 보존)
• 필수 표시 *는 장식입니다 — 실제 검증 의미는 위 aria-required 주입이 담당합니다

토큰#

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).