UNPKG

kwikid-components-react

Version:

KwikID's Component Library in React

314 lines (313 loc) 8.9 kB
{ "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" } } } }