Password Input

Fundamental component for password inputs.

Password

Password (error)

Controlled Visibility

Masked Hidden Value

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

API Reference

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

Prop	Type	Default	Description
maskHiddenValue	boolean	false	Mask the true length of the password input with a fixed width when the value is hidden and the input is not focused.
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`.