폼 필드

입력 컴포넌트에 라벨·도움말·에러를 일관되게 묶는 폼 래퍼다. Polaris의 폼 원칙처럼 placeholder에 필수 정보를 맡기지 않고, label을 입력 목적의 단일 출처로 둔다. helpText와 error는 aria-describedby로 입력에 연결된다.

상태

회사명선택

default

이메일*

required

담당자선택

담당자를 입력해야 합니다.

error

활용 방법

텍스트 입력

짧은 입력에는 Input 을 자식으로 넣는다. id 를 생략하면 FormField 가 생성해 자식에 주입한다.

Preview

이메일*

견적서와 알림을 받을 주소

tsx

<FormField label="이메일" helpText="견적서와 알림을 받을 주소" required>
  <Input type="email" autoComplete="email" placeholder="[email protected]" />
</FormField>

셀렉트

Select 같은 단일 입력도 같은 라벨·도움말 구조를 쓴다.

Preview

우선순위선택

tsx

<FormField label="우선순위" optionalText="선택">
  <Select defaultValue="normal">
    <option value="low">낮음</option>
    <option value="normal">보통</option>
    <option value="high">높음</option>
  </Select>
</FormField>

검증 오류

error 가 있으면 helpText 대신 에러 문구가 표시되고 입력에 aria-invalid 가 전달된다.

Preview

메모선택

메모는 200자 이하여야 합니다.

tsx

<FormField label="메모" error="메모는 200자 이하여야 합니다.">
  <Textarea rows={3} />
</FormField>

사용 지침

· 모든 텍스트 입력·셀렉트·텍스트 영역은 가능한 한 FormField 로 감싼다.
· placeholder 는 예시나 힌트로만 쓰고, 필수 설명은 label 과 helpText 에 둔다.
· Checkbox 처럼 자체 label 을 가진 컨트롤은 FormField 로 중복 라벨을 만들지 않는다.
· error 는 helpText 보다 우선 표시된다.

속성

이름	타입	기본값	설명
label	ReactNode	-	입력 목적을 설명하는 라벨
children	ReactElement	-	Input·Select·Textarea 등 단일 입력 컴포넌트
id	string	-	명시 id. 없으면 자동 생성 후 자식에 주입
helpText	ReactNode	-	입력 아래 보조 설명
error	ReactNode	-	검증 오류. aria-invalid 와 에러 문구 표시
required	boolean	false	필수 표시 별표
optionalText	ReactNode	"선택"	선택 입력 표시. 빈 문자열이면 숨김
className	string	-	폭·간격 조절