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

Table of Contents

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