chrome:shell.skip
chrome:nav.docs chrome:nav.cdk chrome:nav.components blocks:nav.blocks chrome:nav.tools chrome:nav.contribute chrome:nav.about
generated:catalog.area.components
generated:catalog.entry.form.title generated:catalog.entry.input.title generated:catalog.entry.textarea.title generated:catalog.entry.number-input.title generated:catalog.entry.search-input.title generated:catalog.entry.password-input.title generated:catalog.entry.datepicker.title generated:catalog.entry.checkbox.title generated:catalog.entry.switch.title generated:catalog.entry.radio-group.title generated:catalog.entry.select.title generated:catalog.entry.calendar.title generated:catalog.entry.validation.title generated:catalog.entry.validation-rules.title generated:catalog.entry.file-upload.title generated:catalog.entry.combobox.title generated:catalog.entry.input-otp.title generated:catalog.entry.native-select.title chrome:badge.deprecated generated:catalog.entry.slider.title generated:catalog.entry.rate-picker.title generated:catalog.entry.color-picker.title

generated:catalog.entry.password-input.title

generated:catalog.entry.password-input.description

@xngui/components/password-input
@xngui/components/password-input

chrome:demo.section

chrome:demo.preview

demo-preview:password-input.at-least-8-characters-hint

demo-preview:hints.category.navigation:
Tab
demo-preview:hints.category.focus:
Focus
demo-preview:hints.category.shortcuts:
Type
demo-preview:hints.category.timing:
Blur
demo-preview:projection.slots-label:
[xStart] [xEnd]
import { form, validate } from '@angular/forms/signals';
import { XForm } from '@xngui/components/form';
import { XFormField } from '@xngui/components/form-field';
import { XPasswordInput } from '@xngui/components/password-input';
 
private readonly model = signal({ password: '' });
 
protected readonly demoForm = form(this.model, (path) => {
syncDemoStringLength(path.password, () => this.controlState());
validate(path.password, ({ value }) => demoStringFieldErrors(this.controlState(), value));
});

chrome:demo.events.title

chrome:demo.events.empty

chrome:demo.api.title

x-password-input

chrome:demo.api.col.property
chrome:demo.api.col.type
chrome:demo.api.col.default
chrome:demo.api.col.description
size
XSize
—
Visual size tier — falls back to parent `x-form` then XConfigService when unset.
density
XDensity
—
Spacing offsets — orthogonal to `size`; falls back to parent `x-form` then XConfigService when unset.
placeholder
string
''
Placeholder text shown when the control is empty.
autocomplete
XAutocomplete
—
Native `autocomplete` hint for the control.
look
XFormLook
—
Field chrome — outline, fill, flat, or none; falls back to parent `x-form` then XConfigService.
clearable
boolean
false
Shows a clear button when the control has a value.
mask
XTextMaskInput
—
As-you-type mask — preset, Maskito options, or config with `unmask`. Model value stays unmasked (digits-only for presets).
inputMode
string
—
Native `inputmode` hint for mobile keyboards.
spellcheck
boolean
false
Native `spellcheck` attribute.
enterKeyHint
string
—
Native `enterkeyhint` for the virtual keyboard action key.
inputPattern
string
—
Native HTML `pattern` attribute (Signal Forms validators use a separate `pattern` API).
controlId
string
—
Native `id` on the control; falls back to `name`, then a generated id.
showToggle
boolean
true
Show the reveal/hide toggle button.
disabled
boolean
false
Kept in sync by `[formField]`; set directly for standalone use.
readonly
boolean
false
Prevents editing while keeping the control focusable.
invalid
boolean
false
Marks the control invalid — display timing defers to ancestor `x-form-field` when wrapped.
required
boolean
false
Sets the native `required` attribute and `aria-required`.
minLength
number
—
Native `minlength` constraint for validation.
maxLength
number
—
Native `maxlength` constraint for validation.
name
string
''
Form control name — used as `name` on the native element and for id fallback.