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.