Form

Component

접근성 폼 시스템. 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.

formtrigger

Related docs

bun add @reopt-ai/opt-ui

100%

기본 사용

FormGroup — 필드 시맨틱 그룹핑

FormField + FormControl + FormDescription

FormCheckbox + FormRadioGroup — Form Store 바인딩

FormPush + FormRemove — 동적 배열 필드

FormProvider — Context 기반 폼 공유

프로필 설정 — Textarea + Switch

FormSelect — 드롭다운 선택

종합 — 회원가입 폼

FormRoot

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

FormInput

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

FormTextarea

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

FormSelect

Prop	Type	Default	Description
id	string	—	트리거 ID. 외부 FormLabel의 htmlFor와 연결
aria-label	string	—	입력의 접근 가능한 이름
aria-describedby	string	—	설명·오류 요소의 ID 목록
name*	string	—	폼 필드 이름
children*	ReactNode	—	FormSelectPopover 등 자식 요소
placeholder	string	—	미선택 시 표시 텍스트
className	string	—	추가 CSS 클래스

FormSelectPopover

Prop	Type	Default	Description
children*	ReactNode	—	FormSelectItem 목록
sameWidth	boolean	true	트리거와 같은 너비
gutter	number	4	트리거와의 간격 (px)

FormSelectItem

Prop	Type	Default	Description
value*	string	—	옵션 값
children*	ReactNode	—	옵션 레이블

FormSwitch

Prop	Type	Default	Description
name*	string	—	폼 필드 이름
size	"sm" \| "md" \| "lg"	"md"	스위치 크기
disabled	boolean	—	비활성화 상태

FormLabel

Prop	Type	Default	Description
name*	string	—	연결된 필드 이름
children*	ReactNode	—	레이블 텍스트
className	string	—	기본 스타일 오버라이드

FormError

Prop	Type	Default	Description
name*	string	—	연결된 필드 이름
className	string	—	기본 스타일 오버라이드

FormSubmit

Prop	Type	Default	Description
children*	ReactNode	—	버튼 텍스트
className	string	—	기본 스타일 오버라이드

FormProvider

Prop	Type	Default	Description
store*	FormStore	—	useFormStore()로 생성한 폼 스토어
children*	ReactNode	—	자식 폼 요소

FormGroup

Prop	Type	Default	Description
children*	ReactNode	—	그룹 내 필드들
className	string	—	기본 스타일 오버라이드

FormGroupLabel

Prop	Type	Default	Description
children*	ReactNode	—	그룹 레이블 텍스트
className	string	—	기본 스타일 오버라이드

FormDescription

Prop	Type	Default	Description
name*	string	—	연결된 필드 이름
children*	ReactNode	—	도움말 텍스트
className	string	—	기본 스타일 오버라이드

FormField

Prop	Type	Default	Description
name*	string	—	필드 이름
children*	ReactNode	—	label + input + error 등
className	string	—	기본 스타일 오버라이드

FormControl

Prop	Type	Default	Description
name*	string	—	연결된 필드 이름
className	string	—	기본 스타일 오버라이드

FormCheckbox

Prop	Type	Default	Description
name*	string	—	폼 필드 이름 (스토어 키)
className	string	—	기본 스타일 오버라이드

FormRadioGroup

Prop	Type	Default	Description
name*	string	—	폼 필드 이름 (스토어 키)
children*	ReactNode	—	FormRadio 목록
className	string	—	기본 스타일 오버라이드

FormRadio

Prop	Type	Default	Description
name*	string	—	폼 필드 이름 (스토어 키)
value*	string	—	라디오 값
className	string	—	기본 스타일 오버라이드

FormPush

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

FormRemove

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

FormReset

Prop	Type	Default	Description
children*	ReactNode	—	버튼 텍스트
className	string	—	기본 스타일 오버라이드

useFormContext

Prop	Type	Default	Description

useFormStore

Prop	Type	Default	Description
defaultValues	Record<string, unknown>	—	초기 폼 값

컴포넌트 의존 관계

깊이

View test results

테스트 커버리지

2026년 7월 9일17/17 통과

17성공

0실패

17전체

폼 요소를 렌더링한다
입력 필드에 타이핑할 수 있다
FormTextarea를 렌더링한다
FormSelect를 렌더링한다
FormSwitch를 렌더링한다
FormSwitch 크기 변형을 지원한다
FormTextarea는 form context 없이 사용하면 예외를 던진다
FormSelect는 form context 없이 사용하면 예외를 던진다
FormSwitch는 form context 없이 사용하면 예외를 던진다
FormProvider로 store를 context 제공한다
FormGroup + FormGroupLabel을 렌더링한다
FormDescription을 렌더링한다
FormField + FormControl을 렌더링한다
FormCheckbox를 렌더링한다
FormRadioGroup + FormRadio를 렌더링한다
FormReset을 렌더링한다
FormPush와 FormRemove를 렌더링한다

Related components

SettingsForm

Form

AuthForm

Form

WizardForm

Form

DynamicFieldForm

Form

FileUploadForm

Form

StepBuilder

Trigger