Input Password

A password input with a built-in visibility toggle. Clicking the eye icon switches between masked and plain-text views.

When to use

Use diwa-input-password for password fields. The built-in eye icon toggle lets users reveal their password, reducing entry errors without requiring a separate UI element.

Example

<diwa-input-password
  id="pwd"
  label="Password"
  required
  autocomplete="current-password"
></diwa-input-password>

<!-- Confirm field: toggle not needed -->
<diwa-input-password
  label="Confirm password"
  show-toggle="false"
  required
  autocomplete="new-password"
></diwa-input-password>

Visibility toggle

The toggle is enabled by default (showToggle=true). For a confirm-password field where revealing separately could confuse users, set showToggle={false}.

Autocomplete

Use autoComplete="current-password" for login fields and autoComplete="new-password" for registration / change-password fields. This enables browser password managers and prevents autofill of old credentials in new-password contexts.