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.

Usage

The component must be nested within a Field. See Field for more details.

Examples

Field utilities

You can use the parent Field to set appropriate field level labels, description adornments and messages.

<Stack gap="large">
  <Field
    label="Password"
    adornment={
      <Text>
        <TextLink href="#">Forgot password?</TextLink>
      </Text>
    }
    description={
      'Make sure your chosen password is at least 10 characters long.'
    }
  >
    <PasswordInput />
  </Field>
</Stack>

Uncontrolled

Similar to TextInput, the component can be uncontrolled and managing its own internal state.

const passwordRef = React.useRef(null);
const [value, setValue] = React.useState('');
const showValueHandler = React.useCallback(() => {
  setValue(passwordRef.current?.value);
}, [setValue]);

return (
  <Stack gap="large">
    <Field label="Example uncontrolled">
      <PasswordInput ref={passwordRef} />
    </Field>
    <Button onClick={showValueHandler}>Display password value</Button>
    <Text>The password value is: {value}</Text>
  </Stack>
);

Controlled

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.

const [value, setValue] = React.useState(``);

return (
  <Stack gap="large">
    <Field label="Example controlled">
      <PasswordInput value={value} onChange={e => setValue(e.target.value)} />
    </Field>
    <Text>The current password value is: {value}</Text>
  </Stack>
);

Props

The component passes props into its underlying TextInput component and are not listed here.