Pretty Input

  • Updated

Pretty Input

https://nosir.github.io/cleave.js/

Formatting features: limited but good enough for now

  • Credit card number
  • Phone number
  • Date
  • Numeral
  • Custom: blocks, delimiters, prefix

Status

Release AvailableStatusFramework Name
V3CurrentTBC

Implementation Example

Pretty Input: Currency Example

Code JSON
{
  "fieldName": "Total_Income__c",
  "fieldUi": {
    "fieldType": "currency",
    "label": "Total Income",
    "format": {
      "options": {
        "numeral": true,
        "numeralThousandsGroupStyle": "thousand",
        "numeralDecimalScale": 2
      },
      "prefix": "$"    }
  }
}

Pretty Input: Percent Example

Code JSON
{
  "fieldName": "Net_Worth_of_Business__c",
  "fieldUi": {
    "fieldType": "percent",
    "label": "Net Worth of Business",
    "format": {
      "options": {
        "numericOnly": true,
        "delimiter": ".",
        "blocks": [2, 2]
        
      },
      "suffix": "%"      
    }
    
  }
  
}

Pretty Input: SSN Example

Code JSON
{
  "fieldName": "SSN__c",
  "fieldUi": {
    "fieldType": "string",
    "label": "Social Security Number",
    "format": {
      "options": {
        "delimiter": "-",
        "numericOnly": true,
        "blocks": [3, 2, 4]
        
      }
      
    }
    
  }
  
}

In This Article