reopt designreopt design
DocsExploreToolsPricingBuilder
Login
Explore/
opt-ui165opt-charts33opt-datagrid6opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview165Core59Shells75Blocks31
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/Shells/DynamicFieldForm

DynamicFieldForm

Shell

런타임 필드 추가/제거 폼. 최소/최대 필드 수 제약, 개별 검증, 동적 스토어 업데이트 지원.

form
Related docs
npx @reopt-ai/opt-cli surface add form-dynamic
100%

동적 필드 추가/제거

컴포넌트 의존 관계

깊이
▼ USES (1)DynamicFieldFormform

테스트 커버리지

2026년 7월 9일11/11 통과
11성공
0실패
11전체
  • 폼을 렌더링한다
  • 초기 필드를 렌더링한다
  • 필드 추가 버튼을 렌더링한다
  • 필드를 추가한다
  • maxFields에 도달하면 추가 버튼을 비활성화한다
  • minFields 이하로 삭제를 비활성화한다
  • onFieldsChange 콜백을 호출한다
  • labels로 텍스트를 커스텀한다
  • 필드 삭제 후 인덱스가 재정렬된다
  • 삭제한 필드는 제출 값에서 제외된다
  • 필드에 값을 입력할 수 있다

Related components

Form

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

SettingsForm

데이터 기반 설정 폼. 유효성 검증, 라디오, 체크박스 지원.

Form

AuthForm

로그인/회원가입 모드 전환 가능한 인증 폼. 이메일·비밀번호 검증, FormSwitch로 로그인 상태 유지 옵션 지원.

Form

WizardForm

다단계 순차 입력 폼. FormFieldDef 기반 필드 정의, 단계별 검증, 현재 단계가 연결된 진행 표시기, 리뷰 단계를 지원합니다.

Form

FileUploadForm

파일 선택, 메타데이터 표시, 이미지 미리보기를 포함한 업로드 폼. 파일 크기 제한, 설명 입력 지원.

Form

KeyValueEditor

키-값 쌍 편집기. 동적 행 추가/삭제, 비밀값 토글, 유효성 검사를 지원합니다.

Form
PreviousWizardFormNextFileUploadForm

기본 사용

회사 이메일을 입력해주세요.

FormGroup — 필드 시맨틱 그룹핑

개인 정보
직무 정보

FormField + FormControl + FormDescription

영문, 숫자, 하이픈만 사용 가능합니다.

최대 200자까지 입력할 수 있습니다.

FormCheckbox + FormRadioGroup — Form Store 바인딩

구독 설정
요금제 선택

FormPush + FormRemove — 동적 배열 필드

태그 목록

태그를 추가하거나 제거할 수 있습니다.

FormProvider — Context 기반 폼 공유

프로필 설정 — Textarea + Switch

마케팅 알림 수신

FormSelect — 드롭다운 선택

종합 — 회원가입 폼

계정 정보

영문, 숫자를 포함하여 8자 이상 입력해주세요.

역할
보유 기술

보유한 기술 스택을 입력해주세요.

기본 사용

테마

로그인 / 회원가입 폼

다단계 폼 (Wizard)

  1. 1
    기본 정보
  2. 2
    상세 정보
  3. 3
    확인

파일 업로드 폼

기본 사용

=
=
=

비밀값 토글

=
=
=

Controlled + onChange

=
=
=
[
  {
    "id": "1",
    "key": "DATABASE_URL",
    "value": "postgres://localhost:5432/mydb"
  },
  {
    "id": "2",
    "key": "API_KEY",
    "value": "sk-1234567890",
    "isSecret": true
  },
  {
    "id": "3",
    "key": "NODE_ENV",
    "value": "production"
  }
]

최대 항목 제한 (3개)

=
=
=

읽기 전용

=
=
=

빈 상태

항목이 없습니다. 추가 버튼을 눌러주세요.