reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
AuthForm
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

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

© 2026 reopt Inc. All rights reserved.

AuthForm

Shell

Switch between sign-in and sign-up forms with email and password validation and a remember-me option.

form
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { AuthForm } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

로그인 / 회원가입 폼

AuthForm

PropTypeDefaultDescription
defaultMode"login" | "signup""login"초기 모드 (비제어)
mode"login" | "signup"—제어 모드: 현재 모드
onModeChange(mode: "login" | "signup") => void—모드 변경 핸들러
showRememberMebooleantrue로그인 모드에서 '로그인 상태 유지' 표시 여부
minPasswordLengthnumber8비밀번호 최소 길이
onSubmit(values: { email: string; password: string; confirmPassword?: string; rememberMe?: boolean; mode: "login" | "signup" }) => void | Promise<void>—제출 핸들러
labelsAuthFormLabels—i18n용 라벨 오버라이드

컴포넌트 의존 관계

깊이
▼ USES (1)AuthFormform
View test results

테스트 커버리지

2026년 7월 9일11/11 통과
11성공
0실패
11전체
  • 로그인 폼을 렌더링한다
  • 이메일과 비밀번호 필드를 렌더링한다
  • 모드 토글 버튼을 렌더링한다
  • 회원가입 모드에서 비밀번호 확인 필드를 표시한다
  • 로그인 모드에서 로그인 상태 유지를 표시한다
  • showRememberMe=false면 로그인 상태 유지를 숨긴다
  • labels로 텍스트를 커스텀한다
  • onModeChange 콜백을 호출한다
  • 빈 로그인 제출을 차단하고 에러를 표시한다
  • 이메일/비밀번호 placeholder를 렌더링한다
  • 회원가입 모드에서 비밀번호 확인 placeholder를 렌더링한다

Related components

opt-ui

Form

Core

Build accessible forms with opt-ui-primitives Form APIs, field validation, specialized inputs, and shared form store hooks.

opt-ui

SettingsForm

Shells

Build settings forms from data with validation, radio buttons, and checkboxes.

opt-ui

WizardForm

Shells

Guide sequential input with field definitions, per-step validation, an associated progress indicator, and a review step.

opt-ui

DynamicFieldForm

Shells

Add and remove fields at runtime with count limits, individual validation, and dynamic store updates.

opt-ui

FileUploadForm

Shells

Select files with metadata, image previews, size limits, and description input.

opt-ui

KeyValueEditor

Shells

Edit key-value pairs with dynamic rows, secret-value visibility, and validation.

PreviousTeamMemberListNextWizardForm