Free
Pro

Input Mask

Free directive that formats a native <input> as the user types. Pair it with base-input for styling — behavior stays separate from presentation.

freenew

Basic usage

Add baseMask with a pattern string. Tokens: 0 digit, A letter, S alphanumeric. Everything else is a literal. Angular forms receive the masked display value.

Masked: — · Raw: —

HTML

Pattern tokens

TokenAccepts
0Digit 0-9
ALetter a-zA-Z
SAlphanumeric a-zA-Z0-9
OtherLiteral (e.g. () / -)

Unmasked helpers

Import unmaskInputValue (or call unmaskedValue() on the directive) when you need raw characters for an API. Example: (555) 123-4567 → 5551234567.

TypeScript

import { unmaskInputValue } from './input-mask/input-mask.directive';

const raw = unmaskInputValue('(555) 123-4567', '(000) 000-0000');
// '5551234567'

Installation

Run the following command to add this directive to your project:

bash

npx base-ui-cli add input-mask

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add input-mask
// Paths are relative to aliases.components (default: src/app/components)
import { BaseMaskDirective } from './input-mask/input-mask.directive';

@Component({
  selector: 'app-your-component',
  imports: [
    BaseMaskDirective
  ],
  template: `...`
})
export class YourComponent {}

API for input-mask — generated from JSDoc in the library source.

API reference for input-mask
APIMemberTypeDescription
input[baseMask]baseMaskstringMask pattern applied while typing. Tokens: `0` = digit, `A` = letter, `S` = alphanumeric. Other characters are literals.