Configurable inputs

Introduction

Configurable inputs are elements that can be added to a repository, activity or content element. Core input elements are listed below, but custom inputs may be added as an extension.

1. Input

Code example

meta: [{
    "key": "inputKey",
    "type": "INPUT",
    "label": "Input field",
    "placeholder": "Click to add...",
    "validate": {
        "rules": {
            "required": false,
            "max": 250
        }
    }
}]

Preview

2. Text Area

Code example

meta: [{
    "key": "textareaKey",
    "type": "TEXTAREA",
    "label": "Description",
    "placeholder": "Click to add...",
    "validate": {
        "rules": {
            "required": false,
            "max": 250,
            "min": 5
        } 
    }
}]

Preview

3. Checkbox

Code example

meta: [{
    "key": "checkboxKey",
    "type": "CHECKBOX",
    "label": "Generic checkbox label",
    "description": "Description for a checkbox"
}]

Preview

4. Switch

Code example

meta: [{
    "key": "switchKey",
    "type": "SWITCH",
    "label": "Generic switch label",
    "description": "Description for a switch"
}]

Preview

5. Color picker

Code example

meta: [{
    "key": "colorKey",
    "type": "COLOR",
    "label": "Pick a color"
}]

Preview

6. Select

To enable multiselect change the multiple prop to true.

Code example

meta: [{
    "key": "selectKey",
    "type": "SELECT",
    "label": "Select From List",
    "multiple": false,
    "options": [{
      "label": "selection 1",
      "value": 5
    }, {
      "label": "selection 2",
      "value": 10
    }, {
      "label": "selection 3",
      "value": 15
    }, 
    {
      "label": "Advocate",
      "value": 20,
      "img": "https://s3.amazonaws.com/gol-badges/advocate.svg"
    }, 
    {
      "label": "Ally",
      "value": 25,
      "img": "https://s3.amazonaws.com/gol-badges/ally.svg"
    }, 
    {
      "label": "Coach",
      "value": 30,
      "img": "https://s3.amazonaws.com/gol-badges/coach.svg"
    },
    {
      "label": "Leveling Up",
      "value": 35,
      "img": "https://s3.amazonaws.com/gol-badges/leveling_up.svg"
    }]
}]

Preview

7. Date Picker

Note: to disable time picker, change hideTime prop to false

Code example

meta: [{
    "key": "datePicker",
    "type": "DATETIME",
    "label": "date picker",
    "hideTime": false
}]

Preview

8. HTML with Quill editor

Code example

meta: [{
    "key": "html",
    "type": "HTML",
    "label": "html with quill"
}]

Preview

9. File upload

Code example

meta: [{
    "key": "file",
    "type": "FILE",
    "label": "File Upload",
    "placeholder": "Click to add...",
    "validate": {
        "rules": {
            "ext": [
                "pdf",
                "xlsx",
                "mp3",
                "ogg",
                "wma",
                "rar",
                "tar.gz",
                "7z",
                "zip",
                "jpg",
                "jpeg",
                "png",
                "xml",
                "tar"
            ]
        }
    }
}]

Preview