03 · Components · 설정

폼Form

여러 입력 필드를 묶어 수집하는 기본 단위. 수직 배치·명확한 레이블·즉시 피드백이 핵심입니다.

StableWCAG AA

기본 구조

tsx

<form className="flex flex-col gap-4 max-w-[420px]">
  <div>
    <label htmlFor="name">이름</label>
    <Input id="name" required />
  </div>
  <div>
    <label htmlFor="msg">메시지</label>
    <Textarea id="msg" aria-describedby="msg-hint" />
    <HelpText id="msg-hint">최대 500자까지 가능합니다.</HelpText>
  </div>
  <Button type="submit">제출</Button>
</form>

미리보기

구성 규칙

필드는 세로 배치를 기본으로. 가로는 짧은 쌍(성+이름, 시작일+종료일)에만.
레이블은 필드 상단, 보조 설명은 필드 하단에 두세요.
필수 표시는 텍스트("(필수)")나 별표 + 범례로. 색상만으로 전달하지 않습니다.
제출 후에는 성공 Toast 또는 결과 페이지로 피드백하세요.

기본 구조

구성 규칙

도움이 필요하신가요?