Input Masks

Estimated reading: 5 minutes 24 views

What Is an Input Mask?

An input mask is a formatting layer applied to a text input that controls how user input is structured while typing.
Instead of allowing free-form text, an input mask enforces a predefined pattern—such as spacing, separators, or numeric grouping—so the input always follows the expected format.

Input masks are especially useful for:

  • Credit card numbers
  • Phone numbers
  • Currency values
  • Dates and times
  • Structured identifiers (IDs, codes, references)

In Flutter, input masking is implemented using TextInputFormatter, which intercepts and transforms user input in real time.

Input Masking in FlutKit

FlutKit supports input masking through the inputFormatters property, which works with both:

  • CustomTextFormField (recommended for consistent UI and sizing)
  • Flutter’s default TextFormField

FlutKit provides a helper class called InputMask, which contains ready-to-use formatters for common input scenarios.

Why Use Input Masks?

Using input masks provides several benefits:

  • Improved data consistency – Users can only enter valid patterns
  • Better UX – Automatic separators and formatting reduce cognitive load
  • Fewer validation errors – Formatting is enforced during input, not after submission
  • Locale-aware formatting – Especially important for currency and date inputs

Common Input Mask Examples

Credit Card Number

Automatically inserts spaces every four digits.

Dart
CustomTextFormField(
  labelText: 'xxxx xxxx xxxx xxxx',
  inputFormatters: [
    InputMask.creditCard(),
  ],
  suffixIcon: Icons.credit_card_outlined,
),

Use case: Payment forms, billing details

Delimiter-Based Input

Useful for codes or reference numbers.

Dart
CustomTextFormField(
  labelText: 'xxx-xxx-xxx',
  inputFormatters: [
    InputMask.delimiter(),
  ],
  suffixIcon: Icons.numbers_outlined,
),

Custom Delimiter Pattern

Dart
CustomTextFormField(
  labelText: 'xxx.xxx.xxx-xxxx',
  inputFormatters: [
    InputMask.delimiter(
      pattern: '###.###.###-####',
    ),
  ],
  suffixIcon: Icons.numbers_outlined,
),

Use case: Document numbers, tracking codes, national IDs.

Phone Number Format

Dart
CustomTextFormField(
  labelText: 'Phone (xxx) xxx-xxxx',
  inputFormatters: [
    InputMask.phone(),
  ],
  suffixIcon: Icons.phone_enabled_outlined,
),

Use case: Contact forms, user profiles

Currency Input Masks

Currency masks automatically format numbers with thousand separators and currency symbols, based on locale.

US Dollar (USD)

Dart
CustomTextFormField(
  labelText: 'Enter Amount',
  keyboardType: TextInputType.number,
  suffixIcon: Icons.attach_money,
  inputFormatters: [
    InputMask.currency(currencyCode: 'USD'),
  ],
),

Euro (EUR)

Dart
CustomTextFormField(
  labelText: 'Enter Amount',
  keyboardType: TextInputType.number,
  suffixIcon: Icons.euro,
  inputFormatters: [
    InputMask.currency(
      currencyCode: 'EUR',
      locale: 'de_DE',
    ),
  ],
),

Indonesian Rupiah (IDR)

Dart
CustomTextFormField(
  labelText: 'Enter Amount',
  keyboardType: TextInputType.number,
  suffixIcon: Icons.payment_outlined,
  inputFormatters: [
    InputMask.currency(
      currencyCode: 'IDR',
      locale: 'id_ID',
    ),
  ],
),

CFA Franc BCEAO (XOF)

Dart
CustomTextFormField(
  labelText: 'Enter Amount',
  keyboardType: TextInputType.number,
  suffixIcon: Icons.payment_outlined,
  inputFormatters: [
    InputMask.currency(
      currencyCode: 'XOF',
      locale: 'fr-CI',
    ),
  ],
),

Use case: Invoices, pricing forms, financial dashboards

Date Input Masks

Date masks ensure users enter dates in a fixed format.

USA Format (MM/DD/YYYY)

Dart
CustomTextFormField(
  labelText: 'Date (MM/DD/YYYY)',
  suffixIcon: Icons.calendar_month_outlined,
  inputFormatters: [
    InputMask.date(dateFormat: '##/##/####'),
  ],
),

ISO Format (YYYY-MM-DD)

Dart
CustomTextFormField(
  labelText: 'Date (YYYY-MM-DD)',
  suffixIcon: Icons.calendar_month_outlined,
  inputFormatters: [
    InputMask.date(dateFormat: '####-##-##'),
  ],
),

European Format (DD.MM.YYYY)

Dart
CustomTextFormField(
  labelText: 'Date (DD.MM.YYYY)',
  suffixIcon: Icons.calendar_month_outlined,
  inputFormatters: [
    InputMask.date(dateFormat: '##.##.####'),
  ],
),

Time Input Masks

Full Time (HH:mm:ss)

Dart
CustomTextFormField(
  labelText: 'Time (HH:mm:ss)',
  suffixIcon: Icons.alarm_on_outlined,
  inputFormatters: [
    InputMask.time(),
  ],
),

Short Time (HH:mm)

Dart
CustomTextFormField(
  labelText: 'Time (HH:mm)',
  suffixIcon: Icons.alarm_on_outlined,
  inputFormatters: [
    InputMask.time(timeFormat: '##:##'),
  ],
),

Best Practices

  • Use input masks only when the format is strict and predictable
  • Combine input masks with readable labels and hint text
  • For dates and times, consider pairing input masks with a picker dialog
  • Always validate the raw value before submitting data to backend services
  • Prefer CustomTextFormField to maintain consistent sizing and theming across FlutKit

When NOT to Use Input Masks

  • Free-text fields (comments, descriptions)
  • Inputs with highly variable formats
  • Search fields where formatting could block valid queries

Demo

You can view live examples of input masking in:

Forms → Input Masks

This section demonstrates real-time formatting behavior across different input types.

Share this Doc

Input Masks

Or copy link

CONTENTS