ViraStack
  • About
  • Support
HomeGet StartedExamples

Getting started

  • Introduction
  • llms.txt
  • llms-full.txt

Usage

  • useViraPassword()
  • Accessibility
  • Customization
  • Helpers
  • Types
  • UI libraries

Introduction

Accessible, customizable password visibility toggle; a headless React hook.

Show/hide password fields are easy to get wrong: missing ARIA, buttons that submit forms, disabled sync issues, prop conflicts. useViraPassword() handles all of this in one hook. Markup and styling are up to you.

Getting started

Install the package. For live demos, see the examples page.

$ pnpm add @virastack/password

Peer dependencies

  • react ≥ 18.2
  • react-dom ≥ 18.2

Also selectable during ViraStack Start CLI setup (npx virastack@latest --tools password).

Why ViraStack Password?

  • Accessibility: aria-label, aria-pressed, aria-controls, and type="button" out of the box.
  • Headless: prop bags only; same API with shadcn, Ant Design, or native inputs.
  • Smart defaults: Eye / EyeOff SVG icons built in.
  • Safe merge: on* handlers are chained, className is merged; disabled / readOnly lock the toggle.

Scope

This documentation covers the full package surface:

  • useViraPassword() API
  • Accessibility and customization
  • Helpers and types
  • UI libraries and examples
NextuseViraPassword()

On this page

  • Getting started
  • Peer dependencies
  • Why ViraStack Password?
  • Scope
Something wrong? Fix it