PasswordInput - AMiSi Mobile Starter

PasswordInput builds on Input. It manages password visibility and can show a three-level strength indicator.

Usage

import { useState } from 'react';

import { PasswordInput } from '@amisi-mobile-starter/ui';

export const PasswordField = () => {
  const [password, setPassword] = useState('');

  return (
    <PasswordInput
      value={password}
      onChangeText={setPassword}
      showStrengthIndicator
      placeholder="At least 8 characters"
    />
  );
};

Props

Prop	Type	Default	Description
`label`	`string`	`'Password'`	Field label.
`error`	`string`	`undefined`	Error shown instead of helper text.
`helperText`	`string`	`undefined`	Supporting text shown when there is no error.
`showStrengthIndicator`	`boolean`	`false`	Shows `Weak`, `Fair`, or `Strong` for a non-empty value.

All React Native TextInputProps except secureTextEntry are accepted. The component defaults to autoCapitalize="none" and autoCorrect={false}; explicitly supplied values override those defaults. It accepts controlled value or initial defaultValue.