Password Meter

Four bars that fill and change colour as a password gets stronger, with the verdict beside them. The rating looks at length and how many kinds of character are mixed. It is a hint, not a guarantee, and the verdict is read out whenever it changes. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add password-meter

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/password-meter.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { useState } from "react";
import { TextInput } from "react-native";
import { PasswordMeter } from "@/components/ui/password-meter";

export default function Example() {
  const [password, setPassword] = useState("");

  return (
    <>
      <TextInput value={password} onChangeText={setPassword} secureTextEntry />
      <PasswordMeter value={password} />
    </>
  );
}

Props