폼 필드

Betelgeuse 의 폼 필드는 입력 하나에 라벨·도움말·에러를 일관된 구조로 묶는 래퍼다. 대문자 라벨과 굵은 보조 텍스트로 각 필드를 포스터형 블록처럼 읽히게 하고, 필수·선택·에러 상태를 한눈에 드러낸다.

상태

이메일선택

알림을 받을 주소

default

기관명*

required

메모선택

optional

기관명*

기관명을 입력하세요

error

라벨의 for와 입력의 id, aria-invalid는 폼 필드가 자동으로 연결한다.

활용 방법

도움말과 에러

helpText 는 입력 아래 보조 안내로 쓰고, error 가 있으면 도움말 대신 danger 색 메시지가 표시된다.

Preview

이메일선택

알림을 받을 주소

기관명*

기관명을 입력하세요

tsx

<FormField label="이메일" helpText="알림을 받을 주소">
  <Input placeholder="[email protected]" />
</FormField>

<FormField label="기관명" error="기관명을 입력하세요" required>
  <Input placeholder="기관명" />
</FormField>

필수와 선택

required 는 라벨 옆에 별표를 붙이고, 아니면 optionalText 로 선택 표시를 우측에 둔다. optionalText 로 문구를 바꿀 수 있다.

Preview

기관명*

메모옵션

tsx

<FormField label="기관명" required>
  <Input placeholder="기관명" />
</FormField>

<FormField label="메모" optionalText="옵션">
  <Input placeholder="선택 입력" />
</FormField>

스타일 원칙

· 라벨은 대문자로 각 필드의 경계를 분명히 한다.
· 하나의 입력만 감싸 라벨과 상태를 일대일로 묶는다.
· 에러는 굵은 danger 색으로 즉시 눈에 띄게 한다.

속성

이름	타입	기본값	설명
label	ReactNode	-	필드 라벨 (필수)
children	ReactElement	-	단일 입력 요소 (필수)
id	string	-	라벨·입력 연결 id (미지정 시 자동 생성)
helpText	ReactNode	-	입력 아래 보조 안내
error	ReactNode	-	있으면 도움말 대신 에러 메시지 표시
required	boolean	false	필수 여부, 라벨에 별표
optionalText	ReactNode	"선택"	필수가 아닐 때 우측 표시 문구
className	string	-	폭 등 레이아웃 조절