Password Input

A password field with a show/hide toggle and optional strength indicator.

Components used

Input · Button

Preview · Password Input

Code

HTML · @primus/ui-core

<div>
  <label style="display:block;font-size:0.8125rem;font-weight:500;margin-bottom:0.375rem">
    Password
  </label>
  <div style="position:relative">
    <input id="password" type="password"
      placeholder="••••••••"
      style="width:100%;padding:0.5625rem 2.75rem 0.5625rem 0.875rem;
        border:1px solid var(--border);border-radius:7px;
        font-size:0.875rem;box-sizing:border-box" />
    <button type="button"
      class="ghost icon small"
      style="position:absolute;right:6px;top:50%;transform:translateY(-50%)"
      aria-label="Show password"
      onclick="
        const inp = document.getElementById('password');
        this.setAttribute('aria-label', inp.type === 'password' ? 'Hide password' : 'Show password');
        inp.type = inp.type === 'password' ? 'text' : 'password';
      ">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2">
        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
        <circle cx="12" cy="12" r="3"/>
      </svg>
    </button>
  </div>
</div>

React

import { PrimusPasswordInput } from 'primus-react-ui';
import { useState } from 'react';

export function ChangePasswordForm() {
  const [current,  setCurrent]  = useState('');
  const [next,     setNext]     = useState('');
  const [confirm,  setConfirm]  = useState('');
  const [errors,   setErrors]   = useState<Record<string, string>>({});

  return (
    <>
      <PrimusPasswordInput
        label="Current password"
        value={current}
        onChange={setCurrent}
        error={errors.current}
      />
      <PrimusPasswordInput
        label="New password"
        value={next}
        onChange={setNext}
        showStrength
        error={errors.next}
      />
      <PrimusPasswordInput
        label="Confirm new password"
        value={confirm}
        onChange={setConfirm}
        error={confirm && confirm !== next ? 'Passwords do not match' : undefined}
      />
    </>
  );
}

Angular

<!-- change-password.component.html -->
<div class="vstack" style="gap:1rem">
  <primus-password-input
    label="Current password"
    formControlName="current"
    [error]="fieldError('current')">
  </primus-password-input>

  <primus-password-input
    label="New password"
    formControlName="next"
    [showStrength]="true"
    [error]="fieldError('next')">
  </primus-password-input>

  <primus-password-input
    label="Confirm new password"
    formControlName="confirm"
    [error]="confirmError">
  </primus-password-input>
</div>

Props

Prop	Type	Default	Description
label	string	—	Field label
value	string	''	Controlled value
placeholder	string	'••••••••'	Input placeholder
showStrength	boolean	false	Show password strength bar below the field
error	string	—	Error message
disabled	boolean	false	Disabled state
onChange / (valueChange)	(v: string) => void	—	Change handler

Version history

See the Changelog for version history and breaking changes.