Password Input

A styled and accessible password input component that captures sensitive user credentials with masked text display.

import {PasswordInputModule} from "@qualcomm-ui/angular/password-input"

Examples

Simple

The simple API bundles all subcomponents together into a single component.

Brand

Password

Optional hint

<q-password-input
  class="w-72"
  clearable
  hint="Optional hint"
  label="Password"
  placeholder="Create password"
/>

Start Icon

Add a startIcon using the prop at the root. Unlike the Text Input, the endIcon is not supported because its slot is reserved for the password visibility trigger.

Brand

Password

<q-password-input
  class="w-72"
  label="Password"
  placeholder="Placeholder text"
  startIcon="KeyRound"
/>

Child Directives

Provide child directives to customize specific elements while keeping the simple API's default structure.

Brand

Password

Optional hint

<q-password-input class="w-72" clearable placeholder="Create password">
  <div q-password-input-label>Password</div>
  <div q-password-input-hint>Optional hint</div>
</q-password-input>

Composite

Build with the composite API for granular control. This API requires you to provide each subcomponent, but gives you full control over the structure and layout.

Brand

Label

Optional hint

<div class="w-72" q-password-input-root>
  <label q-password-input-label>Label</label>
  <div q-password-input-input-group>
    <input placeholder="Placeholder text" q-password-input-input />
    <button q-password-input-clear-trigger></button>
    <button q-password-input-visibility-trigger></button>
    <span q-password-input-error-indicator></span>
  </div>
  <div q-password-input-error-text>Error text</div>
  <div q-password-input-hint>Optional hint</div>
</div>

Controlled Visibility

Set the initial visibility using the defaultVisible prop, or use visible and visibleChanged to control the visibility manually. These props follow our controlled state pattern.

Brand

Password

import {Component, signal} from "@angular/core"

import {ButtonModule} from "@qualcomm-ui/angular/button"
import {PasswordInputModule} from "@qualcomm-ui/angular/password-input"

@Component({
  imports: [PasswordInputModule, ButtonModule],
  selector: "password-input-controlled-visibility-demo",
  template: `
    <div class="flex flex-col gap-4">
      <q-password-input
        class="w-72"
        defaultValue="passw0rd"
        label="Password"
        placeholder="Enter your password"
        [visible]="visible()"
        (visibleChanged)="setVisible($event)"
      />

      <button
        emphasis="primary"
        q-button
        variant="outline"
        (click)="toggleVisible()"
      >
        {{ visible() ? "Hide Password" : "Show Password" }}
      </button>
    </div>
  `,
})
export class PasswordInputControlledVisibilityDemo {
  protected readonly visible = signal(false)

  setVisible(visible: boolean) {
    this.visible.set(visible)
  }

  toggleVisible() {
    this.visible.update((visible) => !visible)
  }
}

Error Text and Indicator

Provide a custom error message using the errorText prop.

For template-driven forms, the error text and indicator will only render when invalid is true.

Brand

Label

You must enter your password

<q-password-input
  #passwordInput
  class="w-64"
  errorText="You must enter your password"
  label="Label"
  placeholder="Enter your password"
  required
  [invalid]="!value()"
  [(ngModel)]="value"
/>

Forms

Control and validate the input value using Angular form control bindings.

Template Forms

When using template-driven forms with ngModel, perform validation manually in your component and pass the result to the invalid property.

TIP

Form validation timing is controlled by the updateOn property on the form control.

Brand

Required

<q-password-input
  class="w-72"
  label="Required"
  placeholder="Enter a value"
  [errorText]="errorText()"
  [invalid]="!!errorText()"
  [(ngModel)]="value"
/>

Required

When using template forms, pass the required property to apply the RequiredValidator to the form control.

Brand

Required

<q-password-input
  class="w-72"
  label="Required"
  placeholder="Enter a value"
  required
  [(ngModel)]="value"
/>

Reactive Forms

Use Reactive Forms for better control of form state and validation.

We provide default error messages for every built-in validator, so you can omit the errorText prop when using Reactive Forms.
We also look for the error and errorText properties on custom validators. If you provide a custom validator, use one of these properties to provide error messages automatically when the field is invalid:

Brand

Provide the FORM_CONTROL_ERROR_MESSAGE_PROVIDER token to override the default error messages.

import {
  FORM_CONTROL_ERROR_MESSAGE_PROVIDER,
  type FormControlKnownErrors
} from "@qualcomm-ui/angular-core/input"

@Directive({
  providers: [
    {
      provide: FORM_CONTROL_ERROR_MESSAGE_PROVIDER,
      useValue: {
        email: () => "Please provide a valid email address",
      } satisfies FormControlKnownErrors,
    },
  ],
})
export class MyDirective {}

The defaults are as follows:

const defaultKnownErrors: FormControlKnownErrors = {
  email: () => "Invalid email",
  max: (err) => `Max: ${err.max}`,
  maxLength: (err) => `Max length: ${err.maxLength}`,
  min: (err) => `Min: ${err.min}`,
  minLength: (err) => `Min length: ${err.requiredLength}`,
  pattern: () => "Invalid format",
  required: () => "This field is required",
  requiredTrue: () => "This field is required",
}

State Guidelines

The disabled, invalid, and required properties have no effect when using Reactive Forms. Use the equivalent Reactive Form bindings instead:

Brand

Disabled

Invalid

This field is required

Required

disabledField = new FormControl("")
invalidField = new FormControl("", {
  validators: [Validators.required],
})
requiredField = new FormControl("", {validators: [Validators.required]})

API

<q-password-input>

The <q-password-input> component extends the q-password-input-root directive with the following properties:

Prop	Type	Default
clearable When `true`, renders a clear button that resets the input value on click. The button only appears when the input has a value.	boolean	true
errorText Optional error that describes the element when invalid is true.	string

hint Optional hint describing the element. This element is automatically associated with the component's input element for accessibility.	string

label Optional label describing the element. Recommended. This element is automatically associated with the component's input element for accessibility.	string

placeholder HTML placeholder attribute, passed to the internal input element.	string

clearable

Type

boolean

Description

When true, renders a clear button that resets the input value on click. The button only appears when the input has a value.

errorText

Type

string

Description

Optional error that describes the element when invalid is true.

hint

Type

string

Description

Optional hint describing the element. This element is automatically associated with the component's input element for accessibility.

label

Type

string

Description

Optional label describing the element. Recommended. This element is automatically associated with the component's input element for accessibility.

placeholder

Type

string

Description

HTML placeholder attribute, passed to the internal input element.

Prop	Type	Default
autoComplete The autocomplete attribute for the password input.	\| 'current-password' \| 'new-password'	"current-password"
defaultValue The initial state of the input when rendered. Use when you don't need to control the checked state of the input. This property will be ignored if you opt into controlled state via form control bindings.	string
defaultVisible The default visibility of the password input.	boolean
dir The document's text/writing direction.	'ltr' \| 'rtl'	"ltr"
disabled Controls whether the input is disabled in template-driven forms. When true, prevents user interaction and applies visual styling to indicate the disabled state.	boolean
getRootNode A root node to correctly resolve the Document in custom environments. i.e., Iframes, Electron.	() => \| Node \| ShadowRoot \| Document
invalid Controls the visual error state of the input. When true, applies semantic error styling to indicate validation failure.	boolean
name The name of the input field. Useful for form submission.	string
readOnly Whether the input is read-only. When true, prevents user interaction while keeping the input focusable and visible.	boolean
required Controls whether the input is required in template-driven forms. When true, the input must have a value for form validation to pass.	boolean
size The size of the input field and its elements. Governs properties like font size, item padding, and icon sizes.	\| 'sm' \| 'md' \| 'lg'	'md'
startIcon lucide-angular icon, positioned at the start of the input field.	\| string \| LucideIconData

translations Localized messages to use for element labels.	{ visibilityTrigger?: ( visible: boolean, ) => string }
visible Whether the password input is visible.	boolean
(valueChanged) Event emitted when the input value changes. This is only emitted on interaction. It doesn't emit in response to programmatic form control changes.	string
(visibleChanged) Function called when the visibility changes.	boolean

The initial state of the input when rendered. Use when you don't need to control the checked state of the input. This property will be ignored if you opt into controlled state via form control bindings.

defaultVisible

Type

boolean

Description

The default visibility of the password input.

dir

Type

'ltr' | 'rtl'

Description

The document's text/writing direction.

disabled

Type

boolean

Description

Controls whether the input is disabled in template-driven forms. When true, prevents user interaction and applies visual styling to indicate the disabled state.

getRootNode

Type

() =>
| Node
| ShadowRoot
| Document

Description

A root node to correctly resolve the Document in custom environments. i.e., Iframes, Electron.

invalid

Type

boolean

Description

Controls the visual error state of the input. When true, applies semantic error styling to indicate validation failure.

name

Type

string

Description

The name of the input field. Useful for form submission.

readOnly

Type

boolean

Description

Whether the input is read-only. When true, prevents user interaction while keeping the input focusable and visible.

required

Type

boolean

Description

Controls whether the input is required in template-driven forms. When true, the input must have a value for form validation to pass.

size

Type

| 'sm'
| 'md'
| 'lg'

Description

The size of the input field and its elements. Governs properties like font size, item padding, and icon sizes.

startIcon

Type

| string
| LucideIconData

Description

lucide-angular icon, positioned at the start of the input field.

translations

Type

{
  visibilityTrigger?: (
    visible: boolean,
  ) => string
}

Description

Localized messages to use for element labels.

visible

Type

boolean

Description

Whether the password input is visible.

(valueChanged)

Type

string

Description

Event emitted when the input value changes. This is only emitted on interaction. It doesn't emit in response to programmatic form control changes.

(visibleChanged)

Type

boolean

Description

Function called when the visibility changes.

Attribute / Property	Value
`class`	'qui-input__root'
`data-disabled`
`data-focus`
`data-invalid`
`data-part`	'root'
`data-scope`	'password-input'
`data-size`	\| 'sm' \| 'md' \| 'lg'

class

Value

'qui-input__root'

data-disabled

Value

data-focus

Value

data-invalid

Value

data-part

Value

'root'

data-scope

Value

'password-input'

data-size

Value

| 'sm'
| 'md'
| 'lg'

q-password-input-input-group

Attribute / Property	Value
`class`	'qui-input__input-group'
`data-disabled`
`data-focus`
`data-invalid`
`data-part`	'input-group'
`data-readonly`
`data-scope`	'password-input'
`data-size`	\| 'sm' \| 'md' \| 'lg'

class

Value

'qui-input__input-group'

data-disabled

Value

data-focus

Value

data-invalid

Value

data-part

Value

'input-group'

data-readonly

Value

data-scope

Value

'password-input'

data-size

Value

| 'sm'
| 'md'
| 'lg'

q-password-input-label

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`class`	'qui-input__label'
`data-disabled`
`data-focus`
`data-invalid`
`data-part`	'label'
`data-scope`	'password-input'
`data-size`	\| 'sm' \| 'md' \| 'lg'

class

Value

'qui-input__label'

data-disabled

Value

data-focus

Value

data-invalid

Value

data-part

Value

'label'

data-scope

Value

'password-input'

data-size

Value

| 'sm'
| 'md'
| 'lg'

q-password-input-hint

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`class`	'qui-input__hint'
`data-disabled`
`data-part`	'hint'
`data-scope`	'password-input'

q-password-input-clear-trigger

Attribute / Property	Value
`class`	'qui-input__clear-trigger'
`data-disabled`
`data-part`	'clear-trigger'
`data-scope`	'password-input'
`data-size`	\| 'sm' \| 'md' \| 'lg'

class

Value

'qui-input__clear-trigger'

data-disabled

Value

data-part

Value

'clear-trigger'

data-scope

Value

'password-input'

data-size

Value

| 'sm'
| 'md'
| 'lg'

q-password-input-input

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`class`	'qui-input__input'
`data-empty`
`data-focus`
`data-invalid`
`data-part`	'input'
`data-readonly`
`data-scope`	'password-input'
`data-size`	\| 'sm' \| 'md' \| 'lg'
`data-state`	\| 'hidden' \| 'visible'

class

Value

'qui-input__input'

data-empty

Value

data-focus

Value

data-invalid

Value

data-part

Value

'input'

data-readonly

Value

data-scope

Value

'password-input'

data-size

Value

| 'sm'
| 'md'
| 'lg'

data-state

Value

| 'hidden'
| 'visible'

q-password-input-error-text

Prop	Type
icon Optional error indicator icon.	\| string \| LucideIconData
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

icon

Type

| string
| LucideIconData

Description

Optional error indicator icon.

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`class`	'qui-input__error-text'
`data-part`	'error-text'
`data-scope`	'password-input'
`hidden`	boolean

class

Value

'qui-input__error-text'

data-part

Value

'error-text'

data-scope

Value

'password-input'

hidden

Value

boolean

q-password-input-error-indicator

Prop	Type	Default
icon lucide-angular icon	\| LucideIconData \| string	CircleAlert

icon

Type

| LucideIconData
| string

Description

lucide-angular icon

Attribute / Property	Value
`class`	'qui-input__error-indicator'
`data-part`	'error-indicator'
`data-scope`	'password-input'
`data-size`	\| 'sm' \| 'md' \| 'lg'
`hidden`	boolean

class

Value

'qui-input__error-indicator'

data-part

Value

'error-indicator'

data-scope

Value

'password-input'

data-size

Value

| 'sm'
| 'md'
| 'lg'

hidden

Value

boolean

Number Input

Radio