PasswordInput

The PasswordInput component can be used to hide user input. Always use a PasswordInput when your app asks for sensitive data, such as a password. Users can click on the eye icon to hide or show their data.

OverviewProperties

Import

import { PasswordInput } from '@dynatrace/strato-components-preview/forms';

Use cases

This is the simplest version of the PasswordInput, which is uncontrolled and therefore handles its state internally. You can also set a specific initial value using the defaultValue prop.

CodeSandbox

Control the state

The PasswordInput can also be controlled, meaning that you can handle the state. To do so, you need to use the onChange prop to provide a handler that is called when the internal state of the input changes. You also need to assign the value from the state to the PasswordInput by setting the value prop.

CodeSandbox

Customize the tooltip text

You can use the PasswordInput.Tooltip to customize the text displayed if the password input text is either shown or hidden.

CodeSandbox

Validate

This example shows how you can validate the PasswordInput using the react-hook-form package, which handles error messages. For connecting the form with the PasswordInput and validating, you need to register the field with custom error messages and use the useForm hook from react-hook-form. Also, by using the controlState prop, you can override the error messages and connect the input's error state and message to that of the form. This shows a hint in case of an error and applies proper styling to the component. You can also use the pattern prop to provide a RegEx that defines which characters are allowed.

CodeSandbox