reopt designreopt design
DocsExploreToolsPricingBuilder
Explore/
opt-ui161opt-charts21opt-datagrid5opt-editor5opt-chat6opt-shell14brandapp-ui8Examples12
Overview161Core55Blocks75Pages31
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 서비스 약관
  • 개인정보처리방침

© 2026 reopt-ai. All rights reserved.

Explore/블록/SettingsForm

SettingsForm

블록

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

form
관련 문서
npx @reopt-ai/opt-cli surface add settings-form
100%

기본 사용

테마

의존 컴포넌트

coreformcorecheckboxcoreradio-groupcoreswitch

관련 컴포넌트

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.

폼트리거

AuthForm

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

폼

WizardForm

다단계 순차 입력 폼. FormFieldDef 기반 필드 정의, 단계별 검증, 진행 표시기, 리뷰 단계 지원.

폼

DynamicFieldForm

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

폼

FileUploadForm

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

폼

KeyValueEditor

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

폼
이전SidebarNav다음AppMenubar

기본 사용

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

FormGroup — 필드 시맨틱 그룹핑

개인 정보
직무 정보

FormField + FormControl + FormDescription

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

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

FormCheckbox + FormRadioGroup — Form Store 바인딩

구독 설정
요금제 선택

FormPush + FormRemove — 동적 배열 필드

태그 목록

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

FormProvider — Context 기반 폼 공유

프로필 설정 — Textarea + Switch

마케팅 알림 수신

FormSelect — 드롭다운 선택

종합 — 회원가입 폼

계정 정보

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

역할
보유 기술

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

로그인 / 회원가입 폼

다단계 폼 (Wizard)

1
기본 정보
2
상세 정보
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개)

=
=
=

읽기 전용

=
=
=

빈 상태

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