@litforge/password-input

A password input component with visibility toggle, built with Lit.

Overview

The PasswordInput component provides a secure password input with optional visibility toggle functionality.

Installation

npm install @litforge/password-input
# or
pnpm add @litforge/password-input
# or
yarn add @litforge/password-input

Basic Usage

<script type="module">
  import '@litforge/password-input';
</script>

<password-input
  label="Password"
  placeholder="Enter your password"
  value="${password}"
  @input="${handlePasswordChange}"
></password-input>

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | label | string | undefined | Input label | | placeholder | string | undefined | Placeholder text | | value | string | '' | Input value | | error | string | undefined | Error message to display | | disabled | boolean | false | Disables the input | | required | boolean | false | Marks input as required | | showToggle | boolean | false | Shows password visibility toggle button |

Events

input

Fired when the input value changes.

Examples

Basic Password Input

<password-input
  label="Password"
  placeholder="Enter password"
></password-input>

With Visibility Toggle

<password-input
  label="Password"
  show-toggle
  value="${password}"
></password-input>

With Error

<password-input
  label="Password"
  value="${password}"
  error="${passwordError}"
  required
></password-input>

Styling

The component uses CSS variables for theming:

password-input {
  --lf-password-input-font-family: 'Inter', sans-serif;
  --lf-password-input-border-color: #e2e8f0;
  --lf-password-input-error-color: #b42318;
  /* ... more variables */
}

TypeScript

import { PasswordInput } from '@litforge/password-input';

License

Part of the LitForge component library.