@loomidev/password

<loomi-password> — a form-associated password field with reveal, prefixes, validation and neutral strength hints.

Installation

npm install @loomidev/password lit

import "@loomidev/password"; // registers <loomi-password>

Basic Usage

<loomi-password name="password" label="Password"></loomi-password>
<loomi-password name="password" label="Password" required></loomi-password>

Strength Requirements

Set strength with any combination of these optional tokens:

| Token | Requirement | | ----- | ------------------------------- | | A | At least one uppercase letter. | | a | At least one lowercase letter. | | 1 | At least one number. | | # | At least one special character. |

<loomi-password label="Password" strength="Aa1#"></loomi-password>

The matching requirements render beneath the field with gray check marks. A requirement's check mark and label turn green once the current value satisfies it.

Set strength-color to customize that met-state label color.

<loomi-password label="Password" strength="Aa1#" strength-color="#14532d"></loomi-password>

Prefixes

Use text, a built-in icon, a slot, or a prefix dropdown.

<loomi-password prefix-icon="key" label="Password"></loomi-password>
<loomi-password prefix-options="personal,admin,service" label="Password"></loomi-password>

The selected dropdown value is available on .prefixValue and emits a composed loomi-prefix-change event with { value }.

Validation

required, error-message, show-error-inline, validate(), checkValidity() and reportValidity() match <loomi-input>. Strength requirements also participate in validity when strength is set.

<loomi-password
  required
  strength="Aa1#"
  label="Password"
  error-message="Choose a stronger password"
  show-error-inline
></loomi-password>

Field appearance

Use variant="minimal" for a bottom-border-only field:

<loomi-password label="Password" variant="minimal"></loomi-password>

Use label-position="inside" to keep a compact label inside the top of the field, with the password displayed beneath it:

<loomi-password label="Password" label-position="inside"></loomi-password>

Accessibility

For the library-wide baseline, see Foundations — Accessibility.

Responsive behavior

For the shared container and viewport rules, see Foundations — Responsive behavior.

Dark mode

For theme activation, token overrides, and contrast guidance, see Foundations — Dark mode.

Attributes

| Attribute | Default | Description | | ------------------------- | --------- | ----------------------------------------------------------------------------------------------- | | name | (blank) | Submitted with the form. | | label | (blank) | Floating label. | | label-position | default | default keeps the floating label; inside keeps a compact label inside the top of the field. | | placeholder | (blank) | Placeholder text. | | value | (blank) | Current value. | | required | false | Marks the field required. (boolean) | | disabled | false | Disable the field. (boolean) | | readonly | false | Read-only field. (boolean) | | size | medium | tiny | small | regular | medium | big | | variant | default | default | minimal (bottom border only, no box) | | prefix | (blank) | Text prefix. | | prefix-icon | (blank) | Icon-name prefix. | | prefix-options | (blank) | Comma, pipe, or JSON array of dropdown options. | | prefix-value | (blank) | Selected prefix dropdown value. | | transparent-prefix | true | Transparent (vs solid) prefix. (boolean) | | viewable | true | Show a reveal eye. (boolean) | | clearable | false | Show a clear button when the field has a value. (boolean) | | strength | (blank) | Requirement tokens: A, a, 1, #. | | strength-color | (blank) | Custom color for met strength labels. Defaults to a darker success green. | | error-message | (blank) | Message shown when validation fails. | | show-error-inline | false | Render error-message beneath the field. (boolean) | | show-placeholder-always | false | Keep the placeholder visible even with a label. (boolean) |

Methods

| Member | Description | | --------------------- | ---------------------------------------------- | | .value | Get/set the current value. | | focus() / clear() | Focus or clear the field. | | validate() | Run validation now; returns true when valid. |

Slots

| Slot | Description | | -------- | ------------------------------------------------ | | prefix | Content rendered before the main value or label. |

Events

| Event | Description | | --------------------- | --------------------------------------------- | | change | Fired when the value is committed or changed. | | input | Fired while the value is edited. | | loomi-prefix-change | Fired when the prefix changes. |

Dependencies

• @loomidev/core
• @loomidev/icons
• @loomidev/notification
• @loomidev/theme