checklist

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:
1
{
2
    type: "checklist",
3
    label: "Skills",
4
    model: "skills",
5
    listBox: true,
6
    values: [
7
        "HTML5",
8
        "Javascript",
9
        "CSS3",
10
        "CoffeeScript",
11
        "AngularJS",
12
        "ReactJS",
13
        "VueJS"
14
    ]    
15
}
Copied!
Combobox checklist field with values function:
1
{
2
    type: "checklist",
3
    label: "Skills",
4
    model: "skills",
5
    values: function() {
6
      return [
7
        "HTML5",
8
        "Javascript",
9
        "CSS3",
10
        "CoffeeScript",
11
        "AngularJS",
12
        "ReactJS",
13
        "VueJS"
14
      ]    
15
    }),
16
    validator: validators.array
17
}
Copied!
If you select the 2nd and 4th items, the value will be ["Javascript", "CoffeeScript"] in the model.
Checklist field with object values:
1
{
2
    type: "checklist",
3
    label: "Roles",
4
    model: "roles",
5
    values: [
6
        { value: "admin", name: "Administrator"},
7
        { value: "moderator", name: "Moderator"},
8
        { value: "user", name: "Registered User"},
9
        { value: "visitor", name: "Visitor"}
10
}
Copied!
If you select the first and last items, the value will be ["admin", "visitor"] in the model.
Checklist field with custom object values:
1
{
2
    type: "checklist",
3
    label: "Ingredient",
4
    model: "ingredient",
5
    values: [
6
        { uuid: "a11e3f4b-d4f1-45ed-87fc-4eabda4e667e", name: "Cherimoya"},
7
        { uuid: "5ceb59c6-efe6-4c8a-a4bd-0ef621cd1e5d", name: "Pummelo"},
8
        { uuid: "39f05038-39ba-4cb9-8508-720806dcb20b", name: "Jabuticaba"},
9
        { uuid: "94adbe8d-f9db-481c-97c0-7198d5f3d810", name: "Kiwano melon"}
10
    ],
11
    checklistOptions: {
12
        value: "uuid" 
13
    }
14
}
Copied!

checkbox

input

Last modified 3yr ago

Copy link

Contents

Special properties of field

checklistOptions

Usage

Special properties of field

`checklistOptions`

Usage

Listbox checklist field with array of strings:

Combobox checklist field with `values` function:

Checklist field with object values:

Checklist field with custom object values: