폼 필드를 배치하는 레이아웃 유형입니다. form_vertical · form_horizontal · form_inline과 Grid를 조합해 다양한 폼 구조를 구성할 수 있습니다.
레이블이 입력 위에 오는 기본 레이아웃입니다. form_vertical을 명시하거나 form_field만 나열해도 동일하게 동작합니다.
레이블이 왼쪽, 입력이 오른쪽에 배치됩니다. 레이블은 기본적으로 오른쪽 정렬됩니다.
form_label-align-start로 레이블을 왼쪽 정렬하고, form_label-width-sm · form_label-width-lg로 레이블 너비를 조절합니다.
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)로 제한할 수 있습니다.
부모 컨테이너 100%
최대 320px로 제한
입력 열이 남은 공간을 채움
form_actions로 제출·취소 버튼을 그룹화합니다. 가로 레이아웃에서는 레이블 열 너비만큼 들여쓰기됩니다.
세로 레이아웃 + 그리드 + 액션을 조합한 회원 정보 폼입니다.
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
layout | 'vertical' | 'horizontal' | 'inline' | vertical | form_vertical · form_horizontal · form_inline |
fit | boolean | false | 콘텐츠 너비에 맞춤 (form_fit) |
compact | boolean | false | 좁은 필드 간격 (form_compact) |
label-align-start | boolean | false | 라벨 상단·왼쪽 정렬 (form_label-align-start) |
label-width | 'sm' | 'lg' | — | 가로 레이아웃 라벨 너비 (form_label-width-sm · form_label-width-lg) |
tag | string | form | 루트 HTML 태그 (form · div 등) |
선언되지 않은 HTML 속성·이벤트(action, method, novalidate, @submit 등)는 루트 요소에 그대로 전달됩니다.
| 슬롯 | 설명 |
|---|---|
default | form_field · form_actions 등 폼 콘텐츠 |
| 이벤트 | 설명 |
|---|---|
submit | form 제출 이벤트. @submit.prevent로 기본 제출 동작을 막을 수 있습니다. |
reset | form 초기화 이벤트 |
Vue 컴포넌트가 렌더하는 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) | 액션 버튼 간격 |