Form

입력 컨트롤을 격자 형태로 배치하는 레이아웃 컨테이너 컴포넌트

개요

Form 컴포넌트는 24-column CSS Grid 기반으로 자식 컨트롤을 정렬하고, 읽기 전용·라벨 위치 등의 설정을 Context를 통해 하위에 전파합니다.

주요 특징

• ✅ 24-column Grid: CSS Grid 기반 유연한 레이아웃
• ✅ 간격 설정: colGap/rowGap으로 가로·세로 간격 독립 제어
• ✅ 읽기 전용 전파: readOnly 상태를 Context로 자식에 일괄 전파
• ✅ 라벨 위치 전파: labelPosition으로 라벨 표시 방식 일괄 제어
• ✅ 전체 화면 확장: fullSize prop으로 부모 영역 전체 차지
• ✅ 로드 이벤트: 마운트 시 onLoad 콜백 1회 호출
• ✅ 배경색 설정: backgroundColor prop으로 시각적 구분

기본 사용

Form과 Form.Col로 그리드 레이아웃을 구성합니다.

import { Form } from "@vortex/ui-cals"
 
<Form>
  <Form.Col span={12}><Input label="이름" /></Form.Col>
  <Form.Col span={12}><Input label="이메일" /></Form.Col>
  <Form.Col span={8}><Input label="부서" /></Form.Col>
  <Form.Col span={8}><Input label="직급" /></Form.Col>
  <Form.Col span={8}><Input label="전화" /></Form.Col>
</Form>

읽기 전용

readOnly prop으로 폼 전체를 읽기 전용으로 전환합니다. Context를 통해 자식 컨트롤에 전파됩니다.

<Form readOnly>
  <Form.Col span={12}><Input label="이름" /></Form.Col>
  <Form.Col span={12}><Input label="이메일" /></Form.Col>
</Form>

라벨 위치

labelPosition prop으로 라벨 표시 방식을 일괄 설정합니다.

<Form labelPosition="top">
  <Form.Col span={12}><Input label="이름" /></Form.Col>
  <Form.Col span={12}><Input label="이메일" /></Form.Col>
</Form>

로드 이벤트

마운트 시 onLoad 콜백이 1회 호출됩니다. 초기 데이터 조회 등에 활용합니다.

<Form onLoad={() => fetchInitialData()}>
  <Form.Col span={24}><Input label="필드" /></Form.Col>
</Form>

간격 설정

<Form colGap={30} rowGap={40}>
  <Form.Col span={12}><Input /></Form.Col>
  <Form.Col span={12}><Input /></Form.Col>
</Form>

오프셋

Form.Col의 offset prop으로 컬럼 시작 위치를 조정합니다.

<Form>
  <Form.Col span={12}>필드 A</Form.Col>
  <Form.Col span={6} offset={6}>오른쪽 정렬</Form.Col>
</Form>

API Reference

Form Props

Events

Form.Col Props

Context (useFormContext)

접근성

권장 사항

• ✅ role="form" 자동 적용
• ✅ aria-label로 폼 식별자 제공 가능
• ✅ readOnly 시 aria-readonly="true" 자동 적용

관련 컴포넌트

• FormItem: 폼 필드 래퍼