Design system

Input Password

Bundle size: NaN undefined
Install:
npm install @washingtonpost/wpds-input-password
|Copy
Usage:
import { InputPassword } from "@washingtonpost/wpds-input-password"
|Copy

Anatomy

Note: Image is not to scale

  1. Password value
  2. Password Label
  3. Input container
  4. Button Icon

Options

Helper Text

Helper text can be added to the input.


Behavior

Hidden value

The password input by default renders the password hidden.

Focus

Click password input to demostrate the focus state.

Error

Disabled

Text Overflow


Guidance

Ensure the width of the field appropriately sized

Password lengths can vary based on user preference; ensure any reasonably long password will be fully visible within the input.


API Reference

PropTypeDefaultRequired
label
string
Password False
disabled
enum
boolean
----False
name
string
----
True
required
enum
boolean
----False
value
string
----False
onChange
(event: ChangeEvent<HTMLInputElement>) => void
----False
defaultValue
string
----False
id
string
----
True
onFocus
FocusEventHandler<HTMLInputElement>
----False
onBlur
FocusEventHandler<HTMLInputElement>
----False
error
enum
boolean
----False
errorMessage
enum
ReactNode
----False
helperText
enum
ReactNode
----False
success
enum
boolean
----False
hideButtonIconText
string
Hide password text False
showButtonIconText
string
Show password text False