Form

core

접근성 폼 시스템. opt-ui-primitives Form API 기반. 31 exports: FormRoot, FormProvider, FormGroup, FormGroupLabel, FormDescription, FormField, FormControl, FormInput, FormTextarea, FormSelect, FormSelectPopover, FormSelectItem, FormSwitch, FormLabel, FormError, FormSubmit, FormCheckbox, FormRadioGroup, FormRadio, FormPush, FormRemove, FormReset, FormNumberInput, FormSlider, FormStarRating, FormColorPicker, FormIconPicker, FormTagInput, FormDateRangePicker + useFormStore, useFormContext hooks.

컴포넌트 의존 관계

깊이

100%

기본 사용

FormGroup — 필드 시맨틱 그룹핑

FormField + FormControl + FormDescription

FormCheckbox + FormRadioGroup — Form Store 바인딩

FormPush + FormRemove — 동적 배열 필드

FormProvider — Context 기반 폼 공유

프로필 설정 — Textarea + Switch

FormSelect — 드롭다운 선택

종합 — 회원가입 폼

테스트 커버리지

2026년 2월 4일2/2 통과

2성공

0실패

2전체

폼 요소를 렌더링한다
입력 필드에 타이핑할 수 있다

FormRoot Props

Prop	타입	기본값	설명
`store`	`FormStore`	—	useFormStore()로 생성한 폼 스토어. 미지정 시 자식의 FormProvider가 제공.
`children`*	`ReactNode`	—	폼 필드들
`className`	`string`	—	기본 스타일 오버라이드

FormInput Props

Prop	타입	기본값	설명
`name`*	`string`	—	폼 필드 이름 (스토어 키와 매칭)
`type`	`string`	`"text"`	입력 타입
`placeholder`	`string`	—	플레이스홀더
`className`	`string`	—	기본 스타일 오버라이드

FormTextarea Props

Prop	타입	기본값	설명
`name`*	`string`	—	폼 필드 이름
`rows`	`number`	`4`	표시 줄 수
`resize`	`"none" \| "vertical" \| "horizontal" \| "both"`	`"vertical"`	크기 조절 방향
`placeholder`	`string`	—	플레이스홀더
`className`	`string`	—	추가 CSS 클래스

FormSelect Props

Prop	타입	기본값	설명
`name`*	`string`	—	폼 필드 이름
`children`*	`ReactNode`	—	FormSelectPopover 등 자식 요소
`placeholder`	`string`	—	미선택 시 표시 텍스트
`className`	`string`	—	추가 CSS 클래스

FormSelectPopover Props

Prop	타입	기본값	설명
`children`*	`ReactNode`	—	FormSelectItem 목록
`sameWidth`	`boolean`	`true`	트리거와 같은 너비
`gutter`	`number`	`4`	트리거와의 간격 (px)

FormSelectItem Props

Prop	타입	기본값	설명
`value`*	`string`	—	옵션 값
`children`*	`ReactNode`	—	옵션 레이블

FormSwitch Props

Prop	타입	기본값	설명
`name`*	`string`	—	폼 필드 이름
`size`	`"sm" \| "md" \| "lg"`	`"md"`	스위치 크기
`disabled`	`boolean`	—	비활성화 상태

FormLabel Props

Prop	타입	기본값	설명
`name`*	`string`	—	연결된 필드 이름
`children`*	`ReactNode`	—	레이블 텍스트
`className`	`string`	—	기본 스타일 오버라이드

FormError Props

Prop	타입	기본값	설명
`name`*	`string`	—	연결된 필드 이름
`className`	`string`	—	기본 스타일 오버라이드

FormSubmit Props

Prop	타입	기본값	설명
`children`*	`ReactNode`	—	버튼 텍스트
`className`	`string`	—	기본 스타일 오버라이드

FormProvider Props

Prop	타입	기본값	설명
`store`*	`FormStore`	—	useFormStore()로 생성한 폼 스토어
`children`*	`ReactNode`	—	자식 폼 요소

FormGroup Props

Prop	타입	기본값	설명
`children`*	`ReactNode`	—	그룹 내 필드들
`className`	`string`	—	기본 스타일 오버라이드

FormGroupLabel Props

Prop	타입	기본값	설명
`children`*	`ReactNode`	—	그룹 레이블 텍스트
`className`	`string`	—	기본 스타일 오버라이드

FormDescription Props

Prop	타입	기본값	설명
`name`*	`string`	—	연결된 필드 이름
`children`*	`ReactNode`	—	도움말 텍스트
`className`	`string`	—	기본 스타일 오버라이드

FormField Props

Prop	타입	기본값	설명
`name`*	`string`	—	필드 이름
`children`*	`ReactNode`	—	label + input + error 등
`className`	`string`	—	기본 스타일 오버라이드

FormControl Props

Prop	타입	기본값	설명
`name`*	`string`	—	연결된 필드 이름
`className`	`string`	—	기본 스타일 오버라이드

FormCheckbox Props

Prop	타입	기본값	설명
`name`*	`string`	—	폼 필드 이름 (스토어 키)
`className`	`string`	—	기본 스타일 오버라이드

FormRadioGroup Props

Prop	타입	기본값	설명
`name`*	`string`	—	폼 필드 이름 (스토어 키)
`children`*	`ReactNode`	—	FormRadio 목록
`className`	`string`	—	기본 스타일 오버라이드

FormRadio Props

Prop	타입	기본값	설명
`name`*	`string`	—	폼 필드 이름 (스토어 키)
`value`*	`string`	—	라디오 값
`className`	`string`	—	기본 스타일 오버라이드

FormPush Props

Prop	타입	기본값	설명
`name`*	`string`	—	배열 필드 이름
`value`*	`unknown`	—	추가할 기본값
`children`*	`ReactNode`	—	버튼 텍스트
`className`	`string`	—	기본 스타일 오버라이드

FormRemove Props

Prop	타입	기본값	설명
`name`*	`string`	—	배열 필드 이름
`index`*	`number`	—	제거할 인덱스
`children`*	`ReactNode`	—	버튼 텍스트
`className`	`string`	—	기본 스타일 오버라이드

FormReset Props

Prop	타입	기본값	설명
`children`*	`ReactNode`	—	버튼 텍스트
`className`	`string`	—	기본 스타일 오버라이드

useFormStore Props

Prop	타입	기본값	설명
`defaultValues`	`Record<string, unknown>`	—	초기 폼 값

Import

tsx

import {
  FormRoot,
  FormProvider,
  FormGroup,
  FormGroupLabel,
  FormDescription,
  FormField,
  FormControl,
  FormInput,
  FormTextarea,
  FormSelect,
  FormSelectPopover,
  FormSelectItem,
  FormSwitch,
  FormLabel,
  FormError,
  FormSubmit,
  FormCheckbox,
  FormRadioGroup,
  FormRadio,
  FormPush,
  FormRemove,
  FormReset,
  FormNumberInput,
  FormSlider,
  FormStarRating,
  FormColorPicker,
  FormIconPicker,
  FormTagInput,
  FormDateRangePicker,
  useFormStore,
  useFormContext,
} from "@reopt-ai/opt-ui";