Skip to Content
ComponentsIcignalInputPassword

InputPassword

비밀번호 입력에 특화된 보안 입력 필드

개요

InputPassword는 비밀번호 입력을 위한 폼 컴포넌트입니다. 잠금 아이콘과 비밀번호 표시/숨기기 토글이 내장되어 있습니다.

주요 특징

  • ✅ 토글 버튼: 비밀번호 표시/숨기기 전환
  • ✅ 내장 아이콘: Lock, Eye/EyeOff 아이콘
  • ✅ 다양한 크기: xs, sm, md, lg, xl
  • ✅ FormItem 통합: 레이블, 설명, 에러 메시지
  • ✅ 접근성: aria-invalid 자동 설정
  • ✅ 디자인 토큰: 테마 커스터마이징 지원

Sizes

States

영문, 숫자, 특수문자 포함 8자 이상

사용 예시

예시 1: 로그인 폼

로그인 화면에서 비밀번호를 입력합니다.

예시 2: 비밀번호 변경 폼

현재 비밀번호와 새 비밀번호를 입력합니다.

영문, 숫자, 특수문자 포함 8자 이상

예시 3: API 키 입력

외부 서비스 연동을 위한 키를 입력합니다.

외부 데이터 소스 연동용 API Key

절대 외부에 공유하지 마세요

API Reference

Props

PropTypeDefaultDescription
showPasswordTogglebooleantrue비밀번호 표시/숨기기 토글
size"xs" | "sm" | "md" | "lg" | "xl"-컴포넌트 크기
disabledbooleanfalse비활성화 여부
readOnlybooleanfalse읽기 전용 여부
labelstring-필드 레이블
labelWidthstring | number-레이블 너비
requiredbooleanfalse필수 여부
orientation"horizontal" | "vertical""horizontal"레이블-필드 배치 방향
descriptionstring-설명 텍스트
errorstring-에러 메시지
classNamestring-추가 CSS 클래스

<input> 요소의 기본 HTML 속성(placeholder, onChange, value, defaultValue 등)을 모두 지원합니다.

기본 사용법

import { InputPassword } from "@vortex/ui-icignal"
 
<InputPassword label="비밀번호" placeholder="비밀번호를 입력하세요" />
<InputPassword label="API Key" showPasswordToggle={false} />

접근성

ARIA 속성

<InputPassword label="비밀번호" error="비밀번호가 올바르지 않습니다" />

권장 사항

  • ✅ label을 제공하여 입력 목적 전달
  • ✅ 토글 버튼으로 입력 확인 기능 제공
  • ✅ 키보드: Tab으로 입력 필드 → 토글 버튼 이동
  • ❌ showPasswordToggle={false} 남용 지양 (확인 기능 필요)

관련 컴포넌트

Last updated on
InputNumberProgress