checklist

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

Special properties of field

checklistOptions

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" 
    }
}

Last updated