Password Field
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"
className="w-80"
/>
</Form>
API Reference
| Prop | Type | Default | Required |
|---|---|---|---|
appearance | "standard" | "modern" | - | - |
as | JSX.IntrinsicElements | - | - |
description | string | - | - |
error | string | - | - |
family | "body" | "display" | "mono" | Partial<Record<Breakpoint, "body" | "display" | "mono">> | - | - |
hideLabel | boolean | - | - |
hidePasswordText | string | - | - |
label | string | Password | - |
noCapsize | boolean | - | - |
prompt | { link?: string | undefined; label: string; onClick?: (() => void) | undefined; } | - | - |
showPasswordText | string | - | - |
size | "sm" | "md" | "lg" | "xl" | - | - |
state | "error" | - | - |
theme | "white" | "grey" | - | - |
validation | ValidationOptions | - | - |
weight | "bold" | "normal" | Partial<Record<Breakpoint, "bold" | "normal">> | - | - |