Links

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:

{
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 modified 4yr ago