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.
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.
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.
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.
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.
Props
PasswordInputProps
Signature:
export declare type PasswordInputProps = <, | | | | | | | | | | | | | | | | | | | | | | > & & ( | ) & {
/** Handler that is called when the value changes. */
onChange?: (value: , event?: <>) => ;
};PasswordInputUncontrolledProps
| Name | Type | Default | Description |
|---|---|---|---|
defaultValue? | - | The default value of the input. |
PasswordInputControlledProps
| Name | Type | Default | Description |
|---|---|---|---|
value? | - | The value of the input. |
PasswordInput.Tooltip
PasswordInputTooltipProps
, , | Name | Type | Default | Description |
|---|---|---|---|
children? | - | Elements to be displayed in the PasswordInput tooltip slot, preferably an icon or a similar visual element | |
showText? | - | If specified, the tooltip is rendered with this text when the password is shown, which describes what the trigger does. Please also consider translating the text in an internationalized context and use a short text description for the tooltip. | |
hideText? | - | If specified, the tooltip is rendered with this text when the password is hidden, which describes what the trigger does. Please also consider translating the text in an internationalized context and use a short text description for the tooltip. |