WPDS Documentation & Resources

Anatomy

Note: Image is not to scale

Password value
Password Label
Input container
Button Icon

Options

Helper Text

Helper text can be added to the input.


Open in Playroom

Behavior

Hidden value

The password input by default renders the password hidden.


Open in Playroom

Focus

Click password input to demostrate the focus state.


Open in Playroom

Error


Open in Playroom

Disabled


Open in Playroom

Text Overflow


Open in Playroom

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.


Open in Playroom

API Reference

InputPassword

Prop	Description	Type	Default	Required
hideButtonIconText	Accessible text for the hide icon button	string	Hide password text	False
label	The input's label text, required for accessibility	string	Password	False
showButtonIconText	Accessible text for the show icon button	string	Show password text	False
error	Indicates there is an error	enum boolean	----	False
success	indicates there is a success	enum boolean	----	False
disabled	The underlying input element disabled attribute	enum boolean	----	False
buttonIconType	Explicit button icon typing for use in forms	enum button \| reset \| submit	----	False
defaultValue	The initial input element value for uncontrolled components	string	----	False
errorMessage	Text displayed below the input to describe the cause of the error	React.ReactNode	----	False
helperText	Text displayed below the input to provide additional context	React.ReactNode	----	False
id	The id for the underlying input element. Required for accessibility	string	----	True
name	The name for the underlying input element	string	----	True
onBlur	Callback executed when the input fires a blur event	React.FocusEventHandler<HTMLInputElement>	----	False
onChange	Callback executed when the input fires a change event	(event: React.ChangeEvent<HTMLInputElement>) => void	----	False
onFocus	Callback executed when the input fires a focus event	React.FocusEventHandler<HTMLInputElement>	----	False
placeholder	placeholder text	string	----	False
required	The input elements required attribute	enum boolean	----	False
value	The input element value for controlled components	string	----	False
css	WPDS 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

Input Password

Table of Contents