kwikid-components-react
Version:
KwikID's Component Library in React
314 lines (313 loc) • 8.9 kB
JSON
{
"title": "Address Details",
"key": "ADDRESS_DETAILS",
"fields": [
{
"type": "title",
"label": "Address Verification",
"key": "address_verification_title"
},
{
"label": "Address Type",
"type": "radio",
"key": "address_type",
"disabled": false,
"validators": {
"required": true
},
"properties": {
"readOnly": false,
"orientation": "horizontal"
},
"options": [
{ "label": "Current Address", "value": "current" },
{ "label": "Permanent Address", "value": "permanent" }
],
"connectedElements": {
"connectedFields": [
{
"key": "is_current_same_as_permanent",
"triggers": ["ON_INIT", "ON_CHANGE"],
"rules": [
{
"id": "1",
"key": "VALUE_CHECK",
"props": {
"value": {
"source": {
"key": "OBJECT",
"props": {
"object": {
"key": "FORM_DATA",
"path": "$.address_type"
}
}
}
},
"pattern": {
"key": "CUSTOM",
"pattern": "^(current)$"
}
}
}
],
"actions": [
{
"id": "1",
"key": "FIELD_SHOW",
"condition": "1",
"props": {
"fieldKey": "is_current_same_as_permanent"
}
},
{
"id": "2",
"key": "FIELD_HIDE",
"condition": "NOT(1)",
"props": {
"fieldKey": "is_current_same_as_permanent"
}
}
]
}
]
}
},
{
"label": "Is current address same as permanent address?",
"type": "checkbox",
"key": "is_current_same_as_permanent",
"disabled": false,
"hidden": true,
"validators": {
"required": false
},
"properties": {
"readOnly": false
}
},
{
"label": "Address Line 1",
"type": "text",
"key": "address_line_1",
"disabled": false,
"validators": {
"required": true
},
"properties": {
"placeholder": "Flat/House No., Building Name, Street",
"readOnly": false
}
},
{
"label": "Address Line 2",
"type": "text",
"key": "address_line_2",
"disabled": false,
"validators": {
"required": false
},
"properties": {
"placeholder": "Area, Colony, Landmark",
"readOnly": false
}
},
{
"label": "City/Town/Village",
"type": "text",
"key": "city",
"disabled": false,
"validators": {
"required": true
},
"properties": {
"placeholder": "Enter city/town/village",
"readOnly": false
}
},
{
"label": "State",
"type": "select",
"key": "state",
"disabled": false,
"validators": {
"required": true
},
"properties": {
"placeholder": "Select state",
"readOnly": false
},
"options": [
{ "label": "Andhra Pradesh", "value": "andhra_pradesh" },
{ "label": "Arunachal Pradesh", "value": "arunachal_pradesh" },
{ "label": "Assam", "value": "assam" },
{ "label": "Bihar", "value": "bihar" },
{ "label": "Chhattisgarh", "value": "chhattisgarh" },
{ "label": "Delhi", "value": "delhi" },
{ "label": "Goa", "value": "goa" },
{ "label": "Gujarat", "value": "gujarat" },
{ "label": "Haryana", "value": "haryana" },
{ "label": "Himachal Pradesh", "value": "himachal_pradesh" },
{ "label": "Jharkhand", "value": "jharkhand" },
{ "label": "Karnataka", "value": "karnataka" },
{ "label": "Kerala", "value": "kerala" },
{ "label": "Madhya Pradesh", "value": "madhya_pradesh" },
{ "label": "Maharashtra", "value": "maharashtra" },
{ "label": "Manipur", "value": "manipur" },
{ "label": "Meghalaya", "value": "meghalaya" },
{ "label": "Mizoram", "value": "mizoram" },
{ "label": "Nagaland", "value": "nagaland" },
{ "label": "Odisha", "value": "odisha" },
{ "label": "Punjab", "value": "punjab" },
{ "label": "Rajasthan", "value": "rajasthan" },
{ "label": "Sikkim", "value": "sikkim" },
{ "label": "Tamil Nadu", "value": "tamil_nadu" },
{ "label": "Telangana", "value": "telangana" },
{ "label": "Tripura", "value": "tripura" },
{ "label": "Uttar Pradesh", "value": "uttar_pradesh" },
{ "label": "Uttarakhand", "value": "uttarakhand" },
{ "label": "West Bengal", "value": "west_bengal" }
]
},
{
"label": "PIN Code",
"type": "text",
"key": "pin_code",
"disabled": false,
"validators": {
"pattern": {
"key": "CUSTOM",
"pattern": "^[1-9][0-9]{5}$"
},
"required": true
},
"properties": {
"placeholder": "Enter 6-digit PIN code",
"readOnly": false
}
},
{
"label": "Country",
"type": "select",
"key": "country",
"disabled": false,
"validators": {
"required": true
},
"properties": {
"placeholder": "Select country",
"readOnly": false
},
"options": [
{ "label": "India", "value": "india" },
{ "label": "United States", "value": "usa" },
{ "label": "United Kingdom", "value": "uk" },
{ "label": "Canada", "value": "canada" },
{ "label": "Australia", "value": "australia" }
]
},
{
"label": "How long have you lived at this address?",
"type": "select",
"key": "residence_duration",
"disabled": false,
"validators": {
"required": true
},
"properties": {
"placeholder": "Select duration",
"readOnly": false
},
"options": [
{ "label": "Less than 1 year", "value": "less_than_1" },
{ "label": "1-3 years", "value": "1_to_3" },
{ "label": "3-5 years", "value": "3_to_5" },
{ "label": "More than 5 years", "value": "more_than_5" }
]
},
{
"label": "Address Proof Type",
"type": "select",
"key": "address_proof_type",
"disabled": false,
"validators": {
"required": true
},
"properties": {
"placeholder": "Select address proof type",
"readOnly": false
},
"options": [
{ "label": "Aadhaar Card", "value": "aadhaar" },
{ "label": "Utility Bill (Electricity)", "value": "electricity_bill" },
{ "label": "Utility Bill (Water)", "value": "water_bill" },
{ "label": "Utility Bill (Gas)", "value": "gas_bill" },
{ "label": "Telephone/Mobile Bill", "value": "phone_bill" },
{ "label": "Bank Statement", "value": "bank_statement" },
{ "label": "Passport", "value": "passport" },
{ "label": "Rental Agreement", "value": "rental_agreement" }
]
},
{
"label": "Address Proof Document",
"type": "file",
"key": "address_proof_document",
"disabled": false,
"validators": {
"required": true
},
"properties": {
"accept": "image/jpeg,image/png,image/jpg,application/pdf",
"placeholder": "Upload address proof document",
"readOnly": false
}
},
{
"label": "Any landmark near your residence",
"type": "text",
"key": "landmark",
"disabled": false,
"validators": {
"required": false
},
"properties": {
"placeholder": "Enter nearby landmark (optional)",
"readOnly": false
}
},
{
"label": "I confirm that the address details and document provided are authentic and valid",
"type": "checkbox",
"key": "address_confirmation",
"disabled": false,
"validators": {
"required": true
},
"properties": {
"readOnly": false
}
},
{
"type": "button",
"label": "Submit Verification",
"key": "submit_button",
"properties": {
"variant": "primary",
"size": "medium",
"action": "submit"
}
}
],
"layout": {
"type": "vertical",
"styles": {
"container": {
"maxWidth": "800px",
"margin": "0 auto",
"padding": "20px",
"backgroundColor": "#ffffff",
"borderRadius": "8px"
}
}
}
}