Checklist field

This is a checkbox list for multiple selection. The value will be an Array.

Special properties of field

Property Default Accepted values Description
listBox false Boolean If true, render the items as a listBox. If false, render as a comboBox.
values none Array or Function List of items. It can be an array with items, or a Function, what is resulted an array. The item can be a String, Boolean, Number or an Object (with an value and a name properties). You can change value and name (under checklistOptions) to select any properties of that object as value or name.
checklistOptions {} Object Settings to checklist component. See details below.

checklistOptions

Property Default Accepted values Description
value none String Used to select any properties from object in values to use as actual value to save in model.
name none String Used to select any properties from object in name to use as display in the list

Usage

Listbox checklist field with array of strings:

{
    type: "checklist",
    label: "Skills",
    model: "skills",
    listBox: true,
    values: [
        "HTML5",
        "Javascript",
        "CSS3",
        "CoffeeScript",
        "AngularJS",
        "ReactJS",
        "VueJS"
    ]    
}

Combobox checklist field with values function:

{
    type: "checklist",
    label: "Skills",
    model: "skills",
    values: function() {
      return [
        "HTML5",
        "Javascript",
        "CSS3",
        "CoffeeScript",
        "AngularJS",
        "ReactJS",
        "VueJS"
      ]    
    }),
    validator: validators.array
}

If you select the 2nd and 4th items, the value will be ["Javascript", "CoffeeScript"] in the model.

Checklist field with object values:

{
    type: "checklist",
    label: "Roles",
    model: "roles",
    values: [
        { value: "admin", name: "Administrator"},
        { value: "moderator", name: "Moderator"},
        { value: "user", name: "Registered User"},
        { value: "visitor", name: "Visitor"}
}

If you select the first and last items, the value will be ["admin", "visitor"] in the model.

Checklist field with custom object values:

{
    type: "checklist",
    label: "Ingredient",
    model: "ingredient",
    values: [
        { uuid: "a11e3f4b-d4f1-45ed-87fc-4eabda4e667e", name: "Cherimoya"},
        { uuid: "5ceb59c6-efe6-4c8a-a4bd-0ef621cd1e5d", name: "Pummelo"},
        { uuid: "39f05038-39ba-4cb9-8508-720806dcb20b", name: "Jabuticaba"},
        { uuid: "94adbe8d-f9db-481c-97c0-7198d5f3d810", name: "Kiwano melon"}
    ],
    checklistOptions: {
        value: "uuid" 
    }
}

results matching ""

    No results matching ""