Password Input

zyra-input

Standard password field with a built-in show/hide toggle — set type="password" on ZyraInput inside ZyraFormField and the eye icon appears automatically.

Click the eye icon to reveal your password

API

All inputs and configuration options for zyra-input.

PropTypeDefaultDescription
type'password'-Set on ZyraInput to enable password masking and the ZyraFormField toggle
size'sm' | 'md' | 'lg''md'Height and font scale (set on ZyraFormField)

Accessibility

Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.

  • Toggle button has an aria-label that switches between "Show password" and "Hide password"
  • Toggle is excluded from tab order (tabindex="-1") so Tab moves straight from the field to the next control