Documentation Index
Fetch the complete documentation index at: https://mintlify.com/Nettalco/nettalco-theme/llms.txt
Use this file to discover all available pages before exploring further.
The Password component wraps a text input with a visibility toggle icon and an optional strength meter overlay that grades the password as weak, medium, or strong. Nettalco Theme defines tokens for the strength meter bar, the toggle icon color, the overlay panel styling, and the semantic colors used for each strength level.
Usage
<!-- Basic password with strength meter -->
<p-password [(ngModel)]="password" [feedback]="true" />
<!-- Without feedback overlay -->
<p-password [(ngModel)]="password" [feedback]="false" />
<!-- Toggle mask visibility -->
<p-password [(ngModel)]="password" [toggleMask]="true" />
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { PasswordModule } from 'primeng/password';
@Component({
selector: 'app-example',
standalone: true,
imports: [PasswordModule, FormsModule],
templateUrl: './example.component.html'
})
export class ExampleComponent {
password = '';
}
Design Tokens
Meter
| Token | Value | Description |
|---|
meter.background | {content.border.color} | Track background (unfilled portion) |
meter.borderRadius | {content.border.radius} | Corner radius of the meter bar |
meter.height | 0.75rem | Height of the strength meter bar |
Icon
| Token | Value | Description |
|---|
icon.color | {form.field.icon.color} | Color of the show/hide toggle icon |
Overlay
| Token | Value | Description |
|---|
overlay.background | {overlay.popover.background} | Overlay panel background |
overlay.borderColor | {overlay.popover.border.color} | Overlay panel border |
overlay.borderRadius | {overlay.popover.border.radius} | Overlay panel corner radius |
overlay.color | {overlay.popover.color} | Text color inside the overlay |
overlay.padding | {overlay.popover.padding} | Overlay panel padding |
overlay.shadow | {overlay.popover.shadow} | Overlay panel drop shadow |
Content
| Token | Value | Description |
|---|
content.gap | 0.5rem | Gap between strength bar and hint text in overlay |
Strength colors (Light & Dark)
| Token | Value | Description |
|---|
strength.weakBackground | {error.color} | Bar fill for weak passwords |
strength.mediumBackground | {warn.color} | Bar fill for medium passwords |
strength.strongBackground | {success.color} | Bar fill for strong passwords |
Strength colors are identical in light and dark color schemes. They use the semantic error, warn, and success tokens, ensuring they adapt if those global semantic colors are overridden.
Theme Notes
The password input field itself does not define its own tokens — it inherits all form.field.* values from the base theme. Only the strength meter, icon, and overlay elements have component-specific tokens.
The overlay panel reuses overlay.popover.* tokens, which are shared with other popover-type components. Changes to the global popover style will therefore also affect the password strength overlay.
