Password

비밀번호 입력 전용 단일 행 컴포넌트. 입력 값은 항상 마스킹되어 표시됩니다.

개요

Cals Password는 Foundation Input(type="password")을 래핑하여 CALS 제품의 비밀번호 입력 UI를 선언적으로 구현하는 컴포넌트입니다.

주요 특징

• ✅ controlled / uncontrolled: value/onChange 또는 defaultValue로 값 관리
• ✅ FormItem 내장: label/required/description/error prop으로 폼 라벨 자동 래핑
• ✅ 라벨 도움말: labelTooltip으로 라벨 옆 도움말 아이콘 표시
• ✅ 가시성/포커스 제어: visible prop, ref.focus()/blur()/element
• ✅ 디자인 토큰: 조건부 토큰 오버라이드 (prop이 있을 때만 적용)

기본 사용

placeholder로 입력 전 안내 문구를 표시합니다.

<Password placeholder="비밀번호를 입력하세요" />

기본값 설정

defaultValue로 초기 기본값을 지정합니다.

<Password defaultValue="secret123" />

크기

size prop으로 입력란 크기를 지정합니다. xs / sm / md / lg / xl을 지원합니다.

<Password size="xs" />
<Password size="sm" />
<Password size="md" />
<Password size="lg" />
<Password size="xl" />

비활성화 / 읽기 전용

disabled, readOnly 모두 비활성화 외관으로 표시되며 편집할 수 없습니다.

<Password disabled defaultValue="비활성화" />
<Password readOnly defaultValue="읽기 전용" />

라벨

label prop으로 라벨을 표시하고, required로 필수 표시 기호를 추가합니다.

<Password label="비밀번호" placeholder="비밀번호를 입력하세요" />
<Password label="비밀번호 확인" required placeholder="필수 입력" />

라벨 위치

orientation=“horizontal”이면 라벨이 왼쪽에 배치됩니다.

<Password label="비밀번호" orientation="horizontal" labelWidth={80} />

라벨 도움말

labelTooltip 지정 시 라벨 옆 아이콘에 마우스를 올리면 도움말이 표시됩니다.

<Password label="비밀번호" labelTooltip="영문, 숫자 포함 8자 이상" />

글자 수 제한

maxLength 초과 입력은 차단되고, minLength는 유효성 검사 기준으로 전달됩니다.

<Password maxLength={16} minLength={8} />

오류 상태

error prop으로 입력란 외곽을 강조하고 오류 메시지를 표시합니다.

<Password label="비밀번호" error="비밀번호를 입력하세요" />

스타일 오버라이드

backgroundColor, color, borderColor 등으로 디자인 토큰을 오버라이드합니다.

<Password
  backgroundColor="#eef2ff"
  color="#1e3a8a"
  borderColor="#6366f1"
  defaultValue="스타일 오버라이드"
/>

Props

Ref

PasswordRef 인터페이스:

interface PasswordRef {
  focus: () => void
  blur: () => void
  element: HTMLInputElement | null
}