Crestron Components Lib - Showcase App

ch5-textinput: mask attribute

A usage of the mask attribute for a phone number:
The attribute will force the user to add a valid phone number.
When the input value does not follow the given format, the input cannot be submitted.
<ch5-textinput
  label="Phone number:"
  icon="fa fa-phone"
  size="x-large"
  placeholder="Phone Number"
  mask="(+99) 999 999 999"
  id="phoneNumber"
  >
</ch5-textinput>
A usage of the mask attribute for USA zip codes:
The attribute will force the user to add a USA zipcode.
<ch5-textinput
  label="USA Zipcode"
  icon="fa fa fa-map-pin"
  placeholder="USA Zipcode"
  mask="99999 9999"
  id="zipCode"
  >
</ch5-textinput>
A usage of the mask attribute for a credit card number:
The attribute allows a user to add only 16 numbers.
See also the js tab for working with events on a mask.
<ch5-textinput
  label="Your VISA number"
  icon="fa fa-credit-card"
  placeholder="VISA number"
  mask="9999 9999 9999 9999"
  id="creditCard"
  >
</ch5-textinput>
A usage of the mask attribute for prices:
The attribute forces the user to add a price following the given format.
<ch5-textinput
  label="Price:"
  icon="fa fa-money-bill-wave-alt"
  placeholder="Price"
  mask="9,99"
  id="price"
  >
</ch5-textinput>