Skip to content

InputPassword

Status: Stable

Latest released: March 2020

Current version: v9.9.14

Storybook
GitHub

InputPassword hides sensitive data by default.‘Show’ functionality enables users to double check their entry before submitting; ‘Hide’ toggles value back to hidden.


Best practices

  • Label – always included, presents clear description of anticipated data
  • ‘Smart’ value – never use
  • Help message – provides specific details about strong passwords; don’t add guidance as placeholders

Variants

Priority


Development

import InputPassword from '@nerdwallet/react-formatted-input/input-password';
<InputPassword />;

Props

<InputPassword>

label

= 'Password'

string

The default label associated with the input field. Should always be supplied to meet accessibility best practices.