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