Todos os componentes

Showhide Pass

Showhide Pass é um componente para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.

UI Layouts MIT other

O que é

Showhide Pass é um componente para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.

Como usar

Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.

Abrir no catálogo

Cinco cópias grátis por mês. Sem cartão.

Precisa de

npm i lucide-react

Licença

Este componente vem de UI Layouts e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Showhide Pass

./registry/components/form/password/showhide-pass.tsx
'use client';
import { Eye, EyeOff } from 'lucide-react';
import { useState } from 'react';

const PasswordInput = () => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div className='w-96 mx-auto py-14'>
      <label htmlFor='pass' className='text-sm font-normal'>
        Password
      </label>
      <div className='relative mt-1'>
        <input
          type={isVisible ? 'text' : 'password'}
          id='pass'
          placeholder='Password'
          className='dark:bg-neutral-950 bg-neutral-50 w-full outline-hidden focus-within:border-blue-700 rounded-md p-2  border-2 '
        />
        <div
          className='absolute top-3 right-4 text-2xl text-neutral-500 cursor-pointer'
          onClick={() => setIsVisible((prev) => !prev)}
        >
          {isVisible ? <Eye size={22} /> : <EyeOff size={22} />}
        </div>
      </div>
    </div>
  );
};

export default PasswordInput;

Componentes parecidos