Password Input

Fundamental component for password inputs.

Password

Password (error)

Controlled Visibility

import { PasswordInput } from "@ngrok/mantle/input";

<PasswordInput />
<PasswordInput invalid />

API Reference

The PasswordInput accepts the following props in addition to the standard HTML input attributes.

Prop Type Default Description

Prop	Type	Default	Description
onValueVisibilityChange	`(value: boolean) => void`	—	Callback for when the visibility of the password value changes.
showValue	boolean	false	Show/hide the password value as a controlled state
validation	error success warning false `() => "error" \| "success" \| "warning" \| false`	—	Use the `validation` prop to show if the input has a specific validation status. This will change the border and outline of the input. The `false` type is useful when using short-circuiting logic so that you don't need to use a ternary with `undefined`. Setting `validation` to `error` also sets `aria-invalid`.

onValueVisibilityChange

(value: boolean) => void

—

Callback for when the visibility of the password value changes.

showValue

boolean

false

Show/hide the password value as a controlled state

validation

() => "error" | "success" | "warning" | false

—

Use the validation prop to show if the input has a specific validation status. This will change the border and outline of the input.

The false type is useful when using short-circuiting logic so that you don't need to use a ternary with undefined.

Setting validation to error also sets aria-invalid.