Password Field

A password input with a Show and Hide button at its end. The border eases to the accent colour while the field has focus. The button says what it will do, so a screen reader hears "Show password" and then "Hide password". 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-field

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/password-field.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 { PasswordField } from "@/components/ui/password-field";

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

  return <PasswordField value={password} onChangeText={setPassword} />;
}

Props