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.

Note

The general form component guidelines apply to this component. Please make sure you’re familiar with them first.

Anatomy

1. Title: Clearly indicates that this is a password input field.
2. Text hint: Provides instructions about the password requirements.
3. Input box: The interactive area where users can type their passwords. Characters are masked to ensure privacy.
4. Show password toggle: An option that users can activate to unmask their input.
5. 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

PasswordMust be at least 8 characters long

JSX

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

HTML

<form class="o3-form">
  <div class="o3-form-field">
    <label
      class="o3-form-field__label"
      for="o3-form-password-input-_6535792495649979"
    >
      Password
    </label>
    <span
      class="o3-form-input__description"
      id="o3-form-description_615637419495564"
    >
      Must be at least 8 characters long
    </span>
    <div class="o3-password-input__container">
      <input
        id="o3-form-password-input-_6535792495649979"
        data-testid="o3-password-input"
        class="o3-form o3-form-text-input o3-form-text-input--password"
        required=""
        type="password"
        aria-required="true"
      />
      <button
        id="o3-form-password-toggle"
        class="o3-password-input__show-password-toggle o3-password-input__show-password-toggle--show"
        data-testid="o3-password-input-toggle"
        aria-label="Show password"
        title="Show password"
      ></button>
    </div>
  </div>
  <div class="o3-password-input__controls"></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

PasswordMust be 8 characters or more and contain a number

Your password must contain a number

JSX

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

HTML

<form class="o3-form">
  <div class="o3-form-field">
    <label
      class="o3-form-field__label"
      for="o3-form-password-input-_09403161597495857"
    >
      Password
    </label>
    <span
      class="o3-form-input__description"
      id="o3-form-description_1551672106445965"
    >
      Must be 8 characters or more and contain a number
    </span>
    <div class="o3-password-input__container">
      <input
        id="o3-form-password-input-_09403161597495857"
        data-testid="o3-password-input"
        class="o3-form o3-form-text-input o3-form-text-input--password o3-form-text-input--error"
        required=""
        type="password"
        aria-required="true"
      />
      <button
        id="o3-form-password-toggle"
        class="o3-password-input__show-password-toggle o3-password-input__show-password-toggle--show"
        data-testid="o3-password-input-toggle"
        aria-label="Show password"
        title="Show password"
      ></button>
    </div>
    <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>
</form>

Open in StoryBook | Open in Figma