Password Input

Reveal toggle, Caps Lock warning, and a strength meter driven by visible rules.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { useState } from "react";
import { PasswordInput } from "@aile.sh/elia";

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

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <PasswordInput
        strength
        placeholder="Choose a password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <PasswordInput placeholder="Current password" />
    </div>
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia