Custom text

Use text like “Show” / “Hide” instead of icons. icons still accepts ReactNode.

← All examples·custom-text

Preview

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

Details

There is no separate text API; icons.show / icons.hide accept string or JSX.
show: label when password is hidden.
hide: label when password is visible.

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