Lumeo

Input Mask

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

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

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

Value:

'?' 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 — Free-form text input without format constraints
  • NumberInput — Numeric input with increment/decrement for pure number values
  • Form — Wrap InputMask with validation and labels in form layouts