Components
Password input
A password field whose show/hide button is a living eye: open, it follows your pointer and blinks now and then; hidden, it shuts with its lashes down. Warns when Caps Lock is on, and can carry the strength meter.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { PasswordInput } from '@vizzele/react';
<PasswordInput
name="password"
autoComplete="new-password"
meter
minLength={10}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | 'Password' | Floating label. |
meter | boolean | false | Show the strength tube and rules. |
minLength | number | — | Used by the meter (default 8) and the input. |
visible / defaultVisible / onVisibleChange | boolean | — | Controlled or not. |
hint / error | ReactNode | — | Message under the field. |
…input props | InputHTMLAttributes | — | Passed to the <input>. |
Accessibility
- The eye is a button named "Show password" with aria-pressed and aria-controls — its state is spoken, not just drawn.
- Caps Lock is announced politely and tied to the field with aria-describedby.
- Spellcheck and autocapitalise are off, so the password is never sent to a spelling service.
- With reduced motion the eye does not follow the pointer or blink.