Password Text for React

Password Text shows a line as a row of dots, one per character, like a password field, with an eye button after it. Press the button and the dots turn into the characters one after another, each dot shrinking away as its character grows in; press it again and they're dots at once. It can also show the text only while the pointer is over it.

Use it for an API key, a recovery code or a Wi-Fi password on a settings page, or for a playful secret in a hero. To hide chosen words inside a sentence, use Redact Text; for text that decodes itself, Decrypted Text. It's monospaced by default, so the dots and the characters are the same width and nothing moves when it turns; each character's fade is a CSS transition, delayed by its place, with no animation library. With reduced motion the dots and characters swap at once.

Installation

Usage

import { PasswordText } from "@/components/ui/password-text";

<PasswordText text="correct horse battery staple" />

Demos

Hover

trigger="hover" shows the text while the pointer is over it and hides it again when it leaves, with no button. It's a peek for the pointer alone: use the button wherever someone may need to read the text.

Dot

dot is the character each hidden one shows as, • by default, and stagger the time between one character appearing and the next. Every character is hidden, spaces included, as in a password field.

Accessibility

While the text is hidden, its characters aren't in the page at all: only the dots are, and screen readers hear "Hidden, 28 characters" (hiddenLabel), never the text. Once it's revealed they read the text, once, from a visually hidden copy; the dots and characters are hidden from them.

The eye is a real button, reached with Tab, named by toggleLabel ("Show"), with aria-pressed saying whether the text shows. Pressing it doesn't read the text out, since a password spoken aloud can be overheard: screen readers read it when they reach it.

FAQ

API Reference