Password Input

Fundamental component for password inputs.

Password

Password (error)

Controlled Visibility

1import { PasswordInput } from "@ngrok/mantle/input";2 3<PasswordInput />4<PasswordInput validation="error" />

API Reference

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

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`.