PasswordInput

passwordinput-1779393692712.tsx

'use client'
import { useState } from 'react'

function getStrength(pwd) {
  if (pwd.length === 0) return 0
  let s = 0
  if (pwd.length >= 8) s++
  if (/[A-Z]/.test(pwd)) s++
  if (/[0-9]/.test(pwd)) s++
  if (/[^A-Za-z0-9]/.test(pwd)) s++
  return s
}

export default function PasswordInput() {
  const [show, setShow] = useState(false)
  const [value, setValue] = useState('')
  const strength = getStrength(value)
  const colors = ['#e2e8f0', '#ef4444', '#f59e0b', '#3b82f6', '#10b981']
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
      <div style={{
        display: 'flex', alignItems: 'center',
        border: '2px solid #e2e8f0', borderRadius: '10px', padding: '10px 14px',
      }}>
        <input
          type={show ? 'text' : 'password'}
          value={value}
          onChange={e => setValue(e.target.value)}
          placeholder="Enter password"
          style={{ flex: 1, border: 'none', outline: 'none', fontSize: '15px', background: 'transparent' }}
        />
        <button onClick={() => setShow(!show)} style={{
          background: 'none', border: 'none', cursor: 'pointer', fontSize: '18px'
        }}>{show ? '🙈' : '👁️'}</button>
      </div>
      {value.length > 0 && (
        <div style={{ display: 'flex', gap: '4px' }}>
          {[1,2,3,4].map(i => (
            <div key={i} style={{
              flex: 1, height: '4px', borderRadius: '2px',
              background: i <= strength ? colors[strength] : '#e2e8f0',
              transition: 'background 0.3s',
            }} />
          ))}
        </div>
      )}
    </div>
  )
}

Component info

CategoryInputs & Forms

Frameworkreact

TierFREE

Copies0

About

Password input with visibility toggle and strength indicator

More from Inputs & Forms

'use client';

import { useState, useEffect } from 'react';

interface Tag {
  id: number;
  name: string;
}

const TagInput = () => {
  const [tags, setTags] = useState<Tag[]>([]);
  const [inputValue, setInputValue] = useState('');
  const [suggest

TagInput

Inputs & Forms

'use client';

import React, { useState } from 'react';

interface File {
  name: string;
  size: number;
  progress: number;
}

const FileUpload = () => {
  const [dragOver, setDragOver] = useState(false);
  const [files, setFiles] = useState<File[]

FileUpload

Inputs & Forms

import React, { useState } from 'react';

const OTPInput = () => {
  const [otp, setOtp] = useState(new Array(6).fill(''));
  const [activeIndex, setActiveIndex] = useState(0);

  const handleChange = (e, index) => {
    const value = e.target.value;

OTPInput

Inputs & Forms

'use client';

import React, { useState } from 'react';

interface RangeSliderProps {
  min: number;
  max: number;
  defaultValue: [number, number];
}

const RangeSlider: React.FC<RangeSliderProps> = ({ min, max, defaultValue }) => {
  const [minVal

RangeSlider

Inputs & Forms