PasswordInput

비밀번호 표시/숨김 토글 기능을 지원하는 PasswordInput 컴포넌트

Description

PasswordInput은 비밀번호 입력을 위한 전용 Input 컴포넌트입니다. 눈 아이콘을 클릭하여 비밀번호를 표시하거나 숨길 수 있으며, 반응형 크기와 에러 상태를 지원합니다.

"use client";

import { useState } from "react";
import { PasswordInput } from "@/registry/ui/password-input";

export const PasswordInputDemo = () => {
  const [value, setValue] = useState("");

  return (
    <PasswordInput
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="비밀번호를 입력하세요"
    />
  );
};

Installation

pnpx shadcn add @allra/password-input

Usage

import { PasswordInput } from "@/registry/ui/password-input";

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

Props

Prop	Type	Default	Description
`variant`	`default` \| `destructive`	`default`	입력 필드의 스타일 변형
`size`	`xs` \| `sm` \| `default` \| `lg`	`default`	입력 필드의 크기
`responsiveSize`	`ResponsiveSizeConfig`	-	반응형 크기 설정
`error`	`boolean`	`false`	에러 상태 표시
`className`	`string`	-	추가 CSS 클래스
`placeholder`	`string`	-	플레이스홀더 텍스트
`disabled`	`boolean`	`false`	비활성화 상태
`value`	`string`	-	입력 값
`onChange`	`(event: ChangeEvent<HTMLInputElement>) => void`	-	값 변경 핸들러
`onFocus`	`(event: FocusEvent<HTMLInputElement>) => void`	-	포커스 핸들러
`onBlur`	`(event: FocusEvent<HTMLInputElement>) => void`	-	블러 핸들러

Examples

다양한 Props 예시

기본 사용법

비밀번호 입력 필드에 값을 입력하면 눈 아이콘이 나타나며, 클릭하여 비밀번호를 표시하거나 숨길 수 있습니다.

<PasswordInputDemo defaultValue="password123" />

에러 상태

에러가 발생했을 때 입력 필드의 테두리가 빨간색으로 변경되어 시각적으로 알려줍니다.

<PasswordInputDemo defaultValue="password123" error />

비활성화 상태

입력 필드를 비활성화하여 사용자의 입력을 제한할 수 있습니다.

<PasswordInputDemo defaultValue="password123" disabled />

다양한 크기

입력 필드의 크기를 조절할 수 있습니다. xs, sm, default, lg 중에서 선택 가능합니다.

<PasswordInputDemo defaultValue="password123" size="sm" />

반응형 크기

화면 크기에 따라 자동으로 입력 필드의 크기가 조절됩니다. 모바일, 태블릿, 데스크톱 환경에 최적화된 크기를 설정할 수 있습니다.

<PasswordInputDemo
  defaultValue="password123"
  responsiveSize={{
    sm: "sm",
    md: "default",
    lg: "lg"
  }}
/>

Destructive 스타일

입력 필드에 에러 스타일을 적용할 수 있습니다.

<PasswordInputDemo defaultValue="password123" variant="destructive" />

On this page