Password Input

The password input component is used for entering sensitive information, such as passwords or passphrases. It masks the user’s input to maintain privacy and security by replacing typed characters with symbols like dots or asterisks.

Anatomy

Title: Clearly indicates that this is a password input field.
Text hint: Provides instructions about the password requirements.
Input box: The interactive area where users can type their passwords. Characters are masked to ensure privacy.
Show password toggle: An option that users can activate to unmask their input.
Forgot password: Provides access to the functionality to reset a password.

Usage Guidelines

Password Requirements

If there are specific password requirements (e.g., minimum length, special characters) display them as hint in the description field.

Show code

JSX
HTML

<Form>
  <PasswordInput
    label="Password"
    description="Must be at least 8 characters long"
  />
</Form>;

<form class="o3-form">
  <div class="o3-form-field">
    <label
      class="o3-form-field__label"
      for="o3-form-password-input-_30608785555317297"
    >
      Password
    </label>
    <span
      class="o3-form-input__description"
      id="o3-form-description_49892902149727547"
    >
      Must be at least 8 characters long
    </span>
    <input
      id="o3-form-password-input-_30608785555317297"
      class="o3-form o3-form-text-input"
      required=""
      aria-required="true"
      type="password"
    />
  </div>
  <div class="o3-password-input__controls">
    <div class="o3-form-input-checkbox">
      <input
        type="checkbox"
        id="o3-form-password-input-_30608785555317297-showPassword"
        class="o3-form-input-checkbox__input o3-visually-hidden"
        required=""
        aria-required="true"
      />
      <label
        for="o3-form-password-input-_30608785555317297-showPassword"
        class="o3-form-input-checkbox__label"
      >
        Show Password
      </label>
    </div>
    <a class="o3-typography-link" href="">Forgot password?</a>
  </div>
</form>

Open in StoryBook | Open in Figma

Validation

Provide clear and specific error message if the password doesn’t meet the requirements.

Show code

JSX
HTML

<Form>
  <PasswordInput
    label="Password"
    description="Must be at least 8 characters long"
  />
</Form>;

<form class="o3-form">
  <div class="o3-form-field">
    <label
      class="o3-form-field__label"
      for="o3-form-password-input-_6030811745484717"
    >
      Password
    </label>
    <span
      class="o3-form-input__description"
      id="o3-form-description_6763601612149208"
    >
      Must be 8 characters or more and contain a number
    </span>
    <input
      id="o3-form-password-input-_6030811745484717"
      class="o3-form o3-form-text-input o3-form-text-input--error"
      required=""
      aria-required="true"
      type="password"
    />
    <div class="o3-form-feedback o3-form-feedback__error">
      <span class="o3-form-feedback__error-message">
        Your password must contain a number
      </span>
    </div>
  </div>
  <div class="o3-password-input__controls">
    <div class="o3-form-input-checkbox">
      <input
        type="checkbox"
        id="o3-form-password-input-_6030811745484717-showPassword"
        class="o3-form-input-checkbox__input o3-visually-hidden"
        required=""
        aria-required="true"
      />
      <label
        for="o3-form-password-input-_6030811745484717-showPassword"
        class="o3-form-input-checkbox__label"
      >
        Show Password
      </label>
    </div>
    <a class="o3-typography-link" href="">Forgot password?</a>
  </div>
</form>

Open in StoryBook | Open in Figma

Eliminating the confirm password field simplifies the registration process, reducing the number of steps and making it quicker and easier for users to sign up.
Providing a “Show Password” toggle allows users to verify their input without retyping it