Customization

Icons, text, styling, and locked states: fit your design system with the headless API.

Icons & text

The icons field accepts ReactNode: SVG, components, or plain text. show renders when the password is hidden; hide when visible.

import { Home, Star } from "lucide-react"
import { useViraPassword } from "@virastack/password"
 
const { inputProps, btnProps } = useViraPassword({
  icons: {
    show: <Star />,
    hide: <Home />,
  },
})

Text example:

const { inputProps, btnProps } = useViraPassword({
  icons: {
    show: "Show",
    hide: "Hide",
  },
})

Default icons can also be imported from the helpers page. More examples: custom icons, custom text.

inputProps & btnProps

name, autoComplete, className, and extra handlers merge through options:

const { inputProps, btnProps } = useViraPassword({
  id: "signup-password",
  inputProps: {
    name: "password",
    autoComplete: "new-password",
    className: "pr-10",
  },
  btnProps: {
    className: "absolute inset-y-0 right-2 my-auto",
    onClick: () => analytics.track("password_toggled"),
  },
})

Merge rules are on the useViraPassword() page. Example: Prop merge.

disabled & readOnly

In both cases visibility cannot change: the button is disabled, and toggle / setVisible are no-ops.

disabled: toggle locked

// Input + button disabled; toggle / setVisible no-op
useViraPassword({ disabled: true })
 
// Input readOnly; button disabled; toggle / setVisible no-op
useViraPassword({ readOnly: true })