Form Layout
폼 필드를 배치하는 레이아웃 유형입니다. form_vertical · form_horizontal · form_inline과 Grid를 조합해 다양한 폼 구조를 구성할 수 있습니다.
세로
레이블이 입력 위에 오는 기본 레이아웃입니다. form_vertical을 명시하거나 form_field만 나열해도 동일하게 동작합니다.
가로
레이블이 왼쪽, 입력이 오른쪽에 배치됩니다. 레이블은 기본적으로 오른쪽 정렬됩니다.
가로 — 레이블 정렬·너비
form_label-align-start로 레이블을 왼쪽 정렬하고, form_label-width-sm · form_label-width-lg로 레이블 너비를 조절합니다.
인라인
검색·필터처럼 필드를 한 줄에 나란히 배치합니다. 공간이 부족하면 자동으로 줄바꿈됩니다.
그리드
Grid 유틸리티와 조합해 2열·3열 폼을 구성합니다. grid_item-span-6이면 12열 기준 한 행에 2개씩 배치됩니다.
너비
폼 필드는 기본적으로 부모 너비 100%를 사용합니다. form_fit을 사용하면 --input-max-width(320px)로 제한할 수 있습니다.
액션 영역
form_actions로 제출·취소 버튼을 그룹화합니다. 가로 레이아웃에서는 레이블 열 너비만큼 들여쓰기됩니다.
전체 예시
세로 레이아웃 + 그리드 + 액션을 조합한 회원 정보 폼입니다.
API · Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
ref | React.Ref<HTMLElement> | — | 실제 루트 DOM 참조. 기본 tag에서는 HTMLFormElement를 가리킵니다. |
layout | 'vertical' | 'horizontal' | 'inline' | vertical | form_vertical · form_horizontal · form_inline |
fit | boolean | false | 콘텐츠 너비에 맞춤 (form_fit) |
compact | boolean | false | 좁은 필드 간격 (form_compact) |
labelAlignStart | boolean | false | 라벨 상단·왼쪽 정렬 (form_label-align-start) |
labelWidth | 'sm' | 'lg' | — | 가로 레이아웃 라벨 너비 (form_label-width-sm · form_label-width-lg) |
tag | string | form | 루트 HTML 태그 (form · div 등) |
className | string | — | form 루트에 추가 클래스 |
...rest | React.HTMLAttributes<HTMLElement> | — | action · method · noValidate 등 루트 HTML 속성 전달 |
API · Children
| Children | 설명 |
|---|---|
children | form_field · form_actions 등 폼 콘텐츠 (Vue default 슬롯 대응) |
API · Events
| 이벤트 | 설명 |
|---|---|
onSubmit | form 제출 이벤트. 클라이언트 핸들러에서는 preventDefault를 사용하고, Server Action은 action prop으로 연결합니다. |
onReset | form 초기화 이벤트 |
클래스 · 속성
React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
form | 폼 루트 |
form_vertical · form_horizontal · form_inline | 레이아웃 방향 |
form_fit · form_compact · form_label-align-start | 간격·정렬 |
form_label-width-sm · form_label-width-lg | 라벨 너비 |
form_field · form_field-label · form_field-hint · form_field-error | 필드 블록 |
form_actions | 제출·취소 버튼 묶음 |
form_required | 필수 표시 마크 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--form-label-width · --form-label-width-sm · --form-label-width-lg | 7.5rem · 5rem · 10rem | 가로 레이아웃 라벨 너비 |
--form-field-gap | var(--space-lg) | 필드 간격 |
--form-inline-field-min-width | 8rem | 인라인 필드 최소 너비 |
--form-actions-gap | var(--space-sm) | 액션 버튼 간격 |