--- title: Password Input storybookPath: forms-passwordinput--default isExperimentalPackage: true ---
npm install @spark-web/password-input---
title: Password Input
storybookPath: forms-passwordinput--default
isExperimentalPackage: true
---
The password input component allows accepting of password text values. The
component builds off its underlying TextInput component
and toggles the input mode between password and text depending on whether
the show password icon button is toggled to show or hide the password value.
The component must be nested within a Field. SeeField for more details.
You can use the parent Field to set appropriate field level
labels, description adornments and messages.
``jsx live`
adornment={
}
description={
'Make sure your chosen password is at least 10 characters long.'
}
>
Similar to TextInput, the component can be uncontrolled
and managing its own internal state.
`jsx live
const passwordRef = React.useRef(null);
const [value, setValue] = React.useState('');
const showValueHandler = React.useCallback(() => {
setValue(passwordRef.current?.value);
}, [setValue]);
return (
);
`
Similar to TextInput, the component can be controlled by
passing in a value and onChange handler and have its state managed in a
parent component.
`jsx live
const [value, setValue] = React.useState();
return (
);
``
The component passes props into its underlying TextInput
component and are not listed here.