Docs
Animation Password Input

Animation Password Input

Animation Password Input

Enter a password.

  • At least 8 characters - Requirement not met
  • At least 1 number - Requirement not met
  • At least 1 lowercase letter - Requirement not met
  • At least 1 uppercase letter - Requirement not met
  • At least 1 special character - Requirement not met

Installation

Install the following dependencies:

npm install class-variance-authority @radix-ui/react-label

Copy and paste the cn util code into your project.

import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
 
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Copy and paste the password code into your project.

API Reference

Props

PropTypeDescription
childrenReact.ReactNodeThe content to be wrapped inside the input wrapper.
...propsinputProps forwarded to the input component.
Logo Bling BlingStepper