Skip to content

InputPassword

Status: Stable

InputPassword hides sensitive data by default.‘Show’ functionality enables users to double check their entry before submitting; ‘Hide’ toggles value back to hidden.

Best practices

  • Label – always included, presents clear description of anticipated data
  • ‘Smart’ value – never use
  • Help message – provides specific details about strong passwords; don’t add guidance as placeholders

Variants

Priority

Props

<InputPassword>

label

string
A label for the input

style

Deprecated
CSSProperties

defaultValue

string | number | Array<string>

className

string
Class on outer container element

id

string
ID for the input element.

placeholder

string

onFocus

FocusEventHandler<T>

onBlur

FocusEventHandler<T>

onChange

ChangeEventHandler<T>

name

string

disabled

boolean

value

string | number | Array<string>

autoComplete

string

maxLength

number

required

boolean

error

boolean
Flag to indicate if input is in an error (red outline) state. Use in conjunction with errorMessage to display a red error message.

fullWidth

boolean

feedbackMessages

Array<{
feedbackType: "error" | "info" | "success"
message: string
id?: string
}>
A list of feedback messages to show for the group.

helpMessage

ReactNode
Optional help text shown below the input

errorMessage

ReactNode
Red text to be shown indicating the user is in an error state.

tooltip

ReactNode
Optional tooltip shown via an icon next to the label

tooltipPlacement

"bottom" | "left" | "right" | "top"
Positioning of tooltip

icon

Deprecated
ReactNode
Icon to be shown on the right side of the input.

inputRef

(instance: HTMLInputElement | null) => void | RefObject<HTMLInputElement>
Gives access to the input DOM node.