Password Input

Password Input (비밀번호 입력)

비밀번호를 입력받는 컴포넌트예요. 표시 여부 제어·강도 측정기 등과 함께 사용해요.

출처: 문서

아직 스니펫이 없다면 다음 명령을 실행해 password-input 스니펫을 추가해요.

npx @chakra-ui/cli snippet add password-input

이 스니펫은 PasswordInput 컴포넌트에 대한 폐쇄형 컴포넌트 구성을 포함해요.

import {
  PasswordInput,
  PasswordStrengthMeter,
} from "@/components/ui/password-input"

<PasswordInput />
<PasswordStrengthMeter />

size prop을 사용해 비밀번호 입력의 크기를 변경해요.

:::info

비밀번호 입력 크기는 Input 컴포넌트 크기에 매핑돼요.

:::

value와 onChange prop을 사용해 현재 값을 제어해요.

PasswordInput 컴포넌트를 react-hook-form과 함께 사용하는 예시예요.

visible과 onVisibleChange prop을 사용해 비밀번호 입력의 표시 여부를 제어해요.

PasswordStrengthMeter 컴포넌트를 렌더링해 비밀번호의 강도를 표시해요. 비밀번호 입력 value에 기반해 value prop을 계산해요.

PasswordInput 컴포넌트의 PasswordInput 부분에 대한 prop 테이블 (대화형 문서 참고).