Input Password

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

Default

Password input with an eye icon to toggle visibility.

<diwa-input-password label="Password" placeholder="Enter your password"></diwa-input-password>

Without visibility toggle

Set showToggle={false} to hide the eye button — useful for confirmation fields.

<diwa-input-password label="Confirm password" placeholder="Repeat your password"></diwa-input-password>

Validation states

<diwa-input-password label="Password" value="weak" state="error" message="Password must be at least 8 characters."></diwa-input-password>

<diwa-input-password label="Password" value="Str0ng!Pass" state="success" message="Password strength: strong."></diwa-input-password>

Compact

<diwa-input-password label="Password" placeholder="Enter password" compact></diwa-input-password>

Slots

Use start to embed an icon inside the input border, and label-after to place contextual icons or links after the label.

<diwa-input-password label="Password" placeholder="Enter password">
  <diwa-icon slot="start" name="lock" size="16"></diwa-icon>
  <diwa-icon slot="label-after" name="info" size="16"></diwa-icon>
</diwa-input-password>