0.1.49

Theme Switcher

Password Input

Fundamental component for password inputs.

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


API Reference

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

PropTypeDefaultDescription

maskHiddenValue

booleanfalse

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

booleanfalse

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.