Disabled / readOnly

When disabled or readOnly, the toggle is locked and visibility cannot change.

← All examples·disabled

Preview

disabled: toggle locked

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

Details

disabled: true → input and button disabled.
readOnly: true → input readOnly, button disabled.
toggle() and setVisible() become no-ops.

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