cleave

Search…
cleave
Format input text content when you are typing.
Please note, this field depend on the following library:
​cleave.js (github)
​cleave.js phone lib (optional)​
Special properties of field
Property
Default
Accepted values
Description
autocomplete
none
​see doc​
Indicates whether the value of the control can be automatically completed by the browser.
cleaveOptions
{}
Object
Settings to select component. See details below.
placeholder
none
String
Placeholder text for input field
readonly
false
Boolean
If true, the input field is read only
cleaveOptions
For more details, see the official cleave.js documentation.
Property
Default
Accepted values
Description
creditCard
false
Boolean
Enable to trigger credit card shortcut mode. It detects credit card type dynamically and automatically by checking card IIN.
onCreditCardTypeChanged
none
Function
A callback triggered after credit card type changes. The unique String argument type is the type of the detected credit, which can be: amex,mastercard,visa,diners,discover,jcb,dankort,instapayment,uatp
phone
false
Boolean
Enable to trigger phone shortcut mode. This phone mode has to be used together with phoneRegionCode below.
phoneRegionCode
none
String
Indicates the country region code for phone number formatting. You can find your country code in ISO 3166-1 alpha-2 list.
date
false
Boolean
Indicates if this is a date input field. Enable to trigger date shortcut mode.
datePattern
['d', 'm', 'Y']
Array
Indicates the date pattern. Since it's an input field, leading 0 before date and month is required. To indicate what patterns it should apply, you can use: 'Y', 'y', 'm' and 'd'.
numeral
false
Boolean
Indicates if this is a numeral input field. Enable to trigger numeral shortcut mode.
numeralThousandsGroupStyle
thousand
"thousand", "lakh", "wan"
Indicates the thousands separator grouping style.
numeralDecimalScale
2
Integer
Indicates the numeral decimal scale.
numeralDecimalMark
.
String
Indicates the numeral decimal mark. Decimal mark can be different in handwriting, and for delimiter as well.
blocks
[]
Array
indicates the groups to format the input value. It will insert delimiters in between these groups. This option is ignored by creditCard, phone, date and numeral shortcuts mode. When delimiters array is defined, single delimiter option is ignored.
delimiter
a space or / or , depending on context
String
Indicates the delimiter to use in formatting.
delimiters
[]
Array
Indicates the multiple delimiters to use in formatting. This option is ignored by creditCard, phone, date and numeral shortcuts mode. When delimiters array is defined, single delimiter option is ignored.
prefix
null
String
Indicates the prepend string. It can't be removed or changed in the input field.
numericOnly
false
Boolean
Indicates if it only allows numeric letters (0-9). Ignored by creditCard and date shortcuts mode, the value will always be true.
uppercase
false
Boolean
Indicates if it converts value to uppercase letters.
lowercase
false
Boolean
Indicates if it converts value to lowercase letters.
Usage
Credit card number formatting:
1
{
2
  type: "cleave",
3
  label: "Credit card number formatting",
4
  model: "credit",    
5
  cleaveOptions: {    
6
    creditCard: true,
7
    onCreditCardTypeChanged: function(type) {
8
      console.log("onCreditCardTypeChanged", type);    
9
    }
10
  }
11
}
Copied!
Phone number formatting:
1
{
2
  type: "cleave",
3
  label: "Phone number formatting",
4
  model: "phone",    
5
  cleaveOptions: {        
6
    phone: true,
7
    phoneRegionCode: 'FR',
8
  }
9
}
Copied!
Date formatting:
1
{
2
  type: "cleave",
3
  label: "Date formatting",
4
  model: "date",    
5
  cleaveOptions: {
6
    date: true,
7
    datePattern: ['d', 'm', 'Y'],
8
  }
9
}
Copied!
Numeral formatting:
1
{
2
  type: "cleave",
3
  label: "Numeral formatting",
4
  model: "number",    
5
  cleaveOptions: {
6
    numeral: true,
7
    numeralThousandsGroupStyle: 'thousand',
8
    numeralDecimalScale: 2,
9
    numeralDecimalMark: '.',
10
  }
11
}
Copied!
Custom formatting:
1
{
2
  type: "cleave",
3
  label: "Custom formatting",
4
  model: "special",    
5
  cleaveOptions: {
6
    blocks: [0, 2, 0, 3, 4],
7
    delimiter: ' ',
8
    delimiters: ['(', ')', ' ', '-', '-'],    
9
    numericOnly: true,
10
    uppercase: false,
11
    lowercase: false
12
  }
13
}
Copied!
Optional Fields
dateTimePicker
Last modified 3yr ago
Copy link
Contents
Special properties of field
cleaveOptions
Usage