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/KeyValueEditor

KeyValueEditor

Shell

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

form
Related docs
npx @reopt-ai/opt-cli surface add key-value-editor
100%

기본 사용

=
=
=

비밀값 토글

=
=
=

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개)

=
=
=

읽기 전용

=
=
=

빈 상태

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

테스트 커버리지

2026년 7월 9일7/7 통과
7성공
0실패
7전체
  • 엔트리를 렌더링한다
  • 빈 상태를 표시한다
  • 추가 버튼을 클릭하면 새 엔트리를 추가한다
  • 삭제 버튼을 클릭하면 엔트리를 제거한다
  • readOnly 모드에서 추가/삭제 버튼을 숨긴다
  • showSecretToggle을 렌더링한다
  • maxEntries에 도달하면 추가 버튼을 숨긴다

키보드 동작

키동작
Tab키/값 필드 간 이동

Related components

SettingsForm

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

Form

AuthForm

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

Form

WizardForm

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

Form

DynamicFieldForm

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

Form

FileUploadForm

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

Form

EventMetaEditor

이벤트 메타 에디터. 레이블이 연결된 IconPicker + ColorPicker + TagInput 조합으로 이벤트 메타데이터를 편집합니다.

Form
PreviousFailureListNextWorkflowCanvas

기본 사용

테마

로그인 / 회원가입 폼

다단계 폼 (Wizard)

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

동적 필드 추가/제거

파일 업로드 폼

Icon
Color
Tags
webcore