Accessibility

Ready-made ARIA for screen reader and keyboard users; no extra configuration needed.

The hook produces accessible attributes for the button and input. Markup close to the default output:

<input
  id="virapassword-input-…"
  type="password"
/>
<button
  type="button"
  aria-label="Toggle password visibility"
  aria-pressed="false"
  aria-controls="virapassword-input-…"
>
  <!-- EyeIcon -->
</button>

ARIA attributes

Attribute	Where	Role
`aria-label`	button	Default: `Toggle password visibility`
`aria-pressed`	button	Toggle state (visible = true)
`aria-controls`	button	`id` of the controlled input
`aria-invalid` / `aria-describedby`	input (optional)	Can be added manually with `getInputAriaAttributes`

Core helpers are on the helpers page.

type=button

The toggle always gets type="button". This prevents accidental form submission: the value is preserved even when you use your own button component (do not override it).

Stable IDs

If no id is provided, React useId() generates virapassword-input-….
The button's aria-controls links to the same id: multiple password fields on one page work safely.