Skip to content
Paramanu v0.1.0-alpha.0

Password Input

The Password Input wraps a standard input with a visibility toggle, allowing users to reveal or conceal their password.

Basic Usage

import { PwdInput } from "@paramanu/forms-react"


export default function App() {
  return <PwdInput placeholder="Enter password..." />
}
<div class="pm-pwd-input pm-pwd-input--outline pm-pwd-input--md">
  <input class="pm-input pm-input--outline pm-input--md" type="password" placeholder="Enter password..." />
  <button type="button" class="pm-pwd-input__toggle" aria-label="Show password">Show</button>
</div>

Variants

import { PwdInput } from "@paramanu/forms-react"


export default function App() {
  return (
    <>
      <PwdInput variant="outline" placeholder="Outline" />
      <PwdInput variant="filled" placeholder="Filled" />
    </>
  )
}
<div class="pm-pwd-input pm-pwd-input--filled pm-pwd-input--md">
  <input class="pm-input pm-input--filled pm-input--md" type="password" placeholder="Filled" />
  <button type="button" class="pm-pwd-input__toggle" aria-label="Show password">Show</button>
</div>