Basic

Simplest show/hide usage with default icons and ARIA.

← All examples·basic

Preview

import { useViraPassword } from "@virastack/password"
 
function Example() {
  const { inputProps, btnProps } = useViraPassword()
 
  return (
    <div className="relative">
      <input {...inputProps} placeholder="Your password" />
      <button {...btnProps} />
    </div>
  )
}

Details

inputProps and btnProps spread directly.
Default visibility is false; starts with input type=password.
Eye icons come from the package; no extra setup needed.

For the hook API see useViraPassword(), for styling and icons see customization.