@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

``bash
npm install @litforge/password-input


or

pnpm add @litforge/password-input

or

yarn add @litforge/password-input
`

Basic Usage

`html


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

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

$3

Fired when the input value changes.

Examples

$3

`html
label="Password"
placeholder="Enter password"
>
`

$3

`html
label="Password"
show-toggle
value="${password}"
>
`

$3

`html
label="Password"
value="${password}"
error="${passwordError}"
required
>
`

Styling

The component uses CSS variables for theming:

`css
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

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

License

Part of the LitForge component library.