Design system

Input Password

Bundle size
: 2.35 kB
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

PropDescriptionTypeDefaultRequired
labelThe input's label text, required for accessibility
string
Password False
disabledThe underlying input element disabled attribute
enum
boolean
----False
nameThe name for the underlying input element
string
----
True
requiredThe input elements required attribute
enum
boolean
----False
valueThe input element value for controlled components
string
----False
onChangeCallback executed when the input fires a change event
(event: ChangeEvent<HTMLInputElement>) => void
----False
defaultValueThe initial input element value for uncontrolled components
string
----False
idThe id for the underlying input element. Required for accessibility
string
----
True
onFocusCallback executed when the input fires a focus event
FocusEventHandler<HTMLInputElement>
----False
onBlurCallback executed when the input fires a blur event
FocusEventHandler<HTMLInputElement>
----False
errorIndicates there is an error
enum
boolean
----False
errorMessageText displayed below the input to describe the cause of the error
enum
ReactNode
----False
helperTextText displayed below the input to provide additional context
enum
ReactNode
----False
successindicates there is a success
enum
boolean
----False
hideButtonIconTextAccessible text for the hide icon button
string
Hide password text False
showButtonIconTextAccessible text for the show icon button
string
Show password text False