폼 필드

입력 컴포넌트에 라벨·도움말·에러를 일관되게 묶는 폼 래퍼다. Muse에서는 라벨에 Noto Serif KR을 적용해 편집 폼의 지면감을 유지하고, 접근성을 위해 id·aria-describedby·aria-invalid를 자식 입력에 주입한다.

상태

이메일선택

기본

섹션선택

발행될 지면 섹션

도움말

제목*

제목을 입력하세요

에러

활용 방법

편집 폼

Input·Select·Textarea를 같은 라벨/도움말 구조로 묶는다.

Preview

제목*

섹션선택

홈 지면에 노출될 분류

메모선택

tsx

<FormField label="제목" required>
  <Input placeholder="스토리 제목" />
</FormField>

<FormField label="메모" optionalText="선택">
  <Textarea rows={3} />
</FormField>

사용 지침

· 라벨은 입력 목적을 짧게 말한다.
· 도움말은 입력 전에 알아야 할 조건, 에러는 사용자가 바로 고칠 수 있는 문장으로 쓴다.
· 한 FormField에는 하나의 입력 컴포넌트만 넣는다.

속성

이름	타입	기본값	설명
label	ReactNode	-	입력 목적을 설명하는 라벨
children	ReactElement	-	Input·Select·Textarea 등 단일 입력
id	string	-	명시 id. 없으면 자동 생성
helpText	ReactNode	-	입력 아래 보조 설명
error	ReactNode	-	검증 오류. 있으면 aria-invalid 적용
required	boolean	false	필수 여부
optionalText	ReactNode	"선택"	선택 항목 표시 문구