# Input Mask

Source: https://lumeo.nativ.sh/components/input-mask

# Input Mask

A masked input that enforces a specific format pattern — ideal for phone numbers, dates, credit cards, and other structured data entry.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<InputMask />

## When to Use

-   Phone number inputs with automatic formatting
-   Credit card number fields with digit grouping
-   Date entry enforcing MM/DD/YYYY or similar patterns
-   Any structured input where a fixed format reduces user errors

Preview Code

Phone Number

Value:

Preview Code

Date Mask

Preview Code

Credit Card

Preview Code

IP Address

Preview Code

Custom Prompt Character

'?' prompt char instead of default '\_'

## API Reference

### InputMask

Property

Type

Default

Description

Value

string?

—

The raw (unmasked) value. Supports two-way binding.

Mask

string

""

\# = digit, A = letter, \* = any character. Other chars are treated as literal separators.

PromptChar

char

'\_'

Character shown as placeholder for unfilled positions.

Placeholder

string?

—

Override the auto-generated mask placeholder.

Disabled

bool

false

Disables the input.

ValueChanged

EventCallback<string?>

—

Two-way binding callback; fires when the masked value changes.

Required

bool

false

Marks the field as required. Syncs with a parent FormField.

Invalid

bool

false

Applies error styling. Syncs with a parent FormField.

ErrorText

string?

null

Error message displayed below the field when Invalid is true.

HelperText

string?

null

Helper text shown below the field when not invalid.

Label

string?

null

Label rendered above the field (standalone, without FormField).

Name

string?

null

HTML name attribute for form submission.

FormField

FormField.FormFieldContext?

null

Cascaded context from a parent FormField; wires label, validation, and required state automatically.

### Mask Characters

Character

Matches

#

Any digit (0–9)

A

Any letter (a–z, A–Z)

\*

Any character

## Related Components

-   [Input](/components/input) — Free-form text input without format constraints
-   [NumberInput](/components/number-input) — Numeric input with increment/decrement for pure number values
-   [Form](/components/form) — Wrap InputMask with validation and labels in form layouts