FormField

한눈에#

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

사용 시점#

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

플레이그라운드#

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

import { FormField, Input } from '@wds/ui-web';

<FormField
  label="이메일"
>
  <Input aria-label="이메일" placeholder="name@wiz.com" />
</FormField>

변형#

크기#

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

상태#

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 미충족).