PasswordField

PasswordField

PasswordField with message

e.g. Cannot be "password"

PasswordField with secondary label

PasswordField with tertiary label

PasswordField with description

Must be 8 characters long and include a capital letter, a number and a symbol

PasswordField with critical message

Not strong enough

PasswordField with positive message

Strong!

PasswordField on Brand Background

Required props

value
string | number | readonly string[]
onChange
(event: FormEvent<HTMLInputElement>) => void
id
string

Optional props

onBlur
(event: FocusEvent<HTMLInputElement>) => void
onFocus
(event: FocusEvent<HTMLInputElement>) => void
placeholder
string
onVisibilityToggle
(visible: boolean) => void
visibilityToggleLabel
string
name
string
label
ReactNode
tone
"critical" | "positive" | "neutral"
autoComplete
string
disabled
boolean
secondaryLabel
ReactNode
tertiaryLabel
ReactNode
description
ReactNode
message
ReactNode
reserveMessageSpace
boolean
aria-describedby
string
data
Record<string, string | number>
autoFocus
boolean
required
boolean
ref
(instance: HTMLInputElement | null) => void | RefObject<HTMLInputElement>

Further References