PasswordField is a specialised field for password input

PasswordField is the preferred way to render a form field for a current password (not necessarily for creating a new password).

PasswordField accepts the same props as InputField but provides default values for some of them (e.g. label defaults to "Password" and name defaults to password).

In addition to the regular InputField props and functionality, PasswordField accepts an optional forgotPasswordURL prop which will be used to render a link to a password reset page. It also provides the ability for the user to toggle visibility of their password.

<Form>
<PasswordField
name="password"
prompt={{ link: '/forgot-password', label: 'Forgotten your password?' }}
placeholder="Your password"
css={{ width: 320 }}
/>
</Form>

API Reference

PropTypeDefaultRequired
size
"sm" | "md"

-

-

state
"error"

-

-

namestring

-

cssCSSProperties{}

-

asJSX.IntrinsicElements

-

-

hidePasswordText
string

-

-

showPasswordText
string

-

-

error
string

-

-

prompt
{ link: string; label: string; }

-

-

description
string

-

-

hideLabel
boolean

-

-

validation
ValidationOptions

-

-

label
string
Password

-