Docs / Components
SenseInputMaskComponent
Positional mask input from @artificialsenselabs/ui that formats keystrokes and integrates with Angular forms via CVA.
Live demo: run nx serve showcase and open /components/input-mask (port 4202).
Overview
Category: Form controls. Selector: sense-input-mask. Import: import { SenseInputMaskComponent } from '@artificialsenselabs/ui';
<label for="phone">Phone</label>
<sense-input-mask
inputId="phone"
mask="(999) 999-9999"
ariaLabel="Phone number"
[unmask]="true"
[(ngModel)]="phone"
/> Mask tokens: 9 (digit), a (letter), * (alphanumeric), ? (optional trailing). Literal separators are inserted automatically.
Inputs & outputs
| Member | Type | Default | Description |
|---|---|---|---|
mask | string | '' | Positional mask pattern. |
slotChar | string | '_' | Placeholder character for unfilled positions. |
unmask | boolean | false | Emits raw unmasked value to forms. |
autoClear | boolean | true | Clears incomplete input on blur. |
size | 'sm' | 'md' | 'lg' | 'md' | Visual density preset. |
completed | SenseInputMaskCompleteEvent | — | Emits when every required mask position is filled. |
Accessibility
- Provide
ariaLabelor pairinputIdwith an external<label>. - Implements
ControlValueAccessorfor Angular forms integration. - Reference: WAI form labels tutorial.