Skip to main content
Design system

Input Password

Bundle size: 1.43 kB
Install:
npm install @washingtonpost/wpds-ui-kit
|Copy
Usage:
import { InputPassword } from "@washingtonpost/wpds-ui-kit"
|Copy
Storybook:  View on Storybook
Source:  View on Github

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

InputPassword

PropDescriptionTypeDefaultRequired
hideButtonIconTextAccessible text for the hide icon button
string
Hide password text False
labelThe input's label text, required for accessibility
string
Password False
showButtonIconTextAccessible text for the show icon button
string
Show password text False
errorIndicates there is an error
enum
boolean
----False
successindicates there is a success
enum
boolean
----False
disabledThe underlying input element disabled attribute
enum
boolean
----False
buttonIconTypeExplicit button icon typing for use in forms
enum
button | reset | submit
----False
defaultValueThe initial input element value for uncontrolled components
string
----False
errorMessageText displayed below the input to describe the cause of the error
React.ReactNode
----False
helperTextText displayed below the input to provide additional context
React.ReactNode
----False
idThe id for the underlying input element. Required for accessibility
string
----
True
nameThe name for the underlying input element
string
----
True
onBlurCallback executed when the input fires a blur event
React.FocusEventHandler<HTMLInputElement>
----False
onChangeCallback executed when the input fires a change event
(event: React.ChangeEvent<HTMLInputElement>) => void
----False
onFocusCallback executed when the input fires a focus event
React.FocusEventHandler<HTMLInputElement>
----False
placeholderplaceholder text
string
----False
requiredThe input elements required attribute
enum
boolean
----False
valueThe input element value for controlled components
string
----False
cssWPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.
CSS
----False
Edit this page on GitHub.