Skip to content

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

  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.

Must be at least 8 characters long
Forgot password?
<Form>
<PasswordInput
label="Password"
description="Must be at least 8 characters long"
/>
</Form>;
Open in StoryBook | Open in Figma

Validation

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

Must be 8 characters or more and contain a number
Forgot password?
<Form>
<PasswordInput
label="Password"
description="Must be at least 8 characters long"
/>
</Form>;
Open in StoryBook | Open in Figma
  1. 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.

  2. Providing a “Show Password” toggle allows users to verify their input without retyping it