Skip to content
Jewel

Password field

A text field with an eye button that shows and hides what was typed, for passwords, tokens and keys.

CSS
css/components/password.css
JS
js/components/password.js

01 — Examples

Password

Press the eye to show the password. It hides again when the form is submitted.

Token

The button’s label follows the field’s label, so screen readers hear “Show cluster token”.

02 — Usage

Use it for

  • Passwords, API tokens, keys and other secrets people type or paste.

Avoid

  • Showing the value by default.
  • Fields that aren’t secret. Use a plain .input.

03 — Accessibility

Notes

  • The eye is a real button with aria-pressed; its label switches between “Show” and “Hide”.
  • Focus stays in the field after pressing it, so typing can carry on.
  • Set autocomplete (current-password or new-password) so password managers work.