WeWeb Documentation

Masked Input ​

Easily add inputs to your web app that need to match a specific pattern—like phone numbers!

masked-input

Configuring the Masked Input ​

The Masked Input is just like the regular input in WeWeb, but with a twist—you get to add a pattern mask! Here's a quick guide on how to set up your pattern:

A pattern mask is simply a string like this: '{#}000[aaa]/NIC-``*[**]'

Here's what each part means:

  • 0: any digit
  • a: any letter
  • *: any character
  • []: makes the input optional
  • {}: includes a fixed part in the unmasked value

Check out these examples, each demonstrating how to use pattern masks for different types of inputs:

  • US phone: {(000)} 000-0000
    Explanation: This pattern is used for formatting US phone numbers, where the area code is enclosed in parentheses, followed by the main number.

  • French phone: +{33} 000 000 000
    Explanation: This pattern includes the French country code (+33) and formats the local phone number in groups of three digits.

  • Bank card: 0000 0000 0000 0000
    Explanation: This pattern is for credit or debit card numbers, typically consisting of 16 digits grouped in sets of four for readability.

  • International Bank Account Number (IBAN): 0000 0000 0000 0000 0000 00
    Explanation: This pattern accommodates the IBAN format, which can vary in length but often includes up to 22 characters.

  • IP address: 000.000.000.000
    Explanation: This pattern is for IPv4 addresses, consisting of four sets of numbers separated by dots, each ranging from 0 to 255.

  • US Social Security number: 000-00-0000
    Explanation: This pattern matches the format of a US Social Security number, with three groups of digits separated by hyphens.

  • French Social Security number: 00 00 00 000 000
    Explanation: This pattern is tailored for the French Social Security number format, which includes several groups of digits separated by spaces.