select

This is a HTML select & option selection list field. You can only select one item.

Special properties of field

selectOptions

Usage

Select field with array of strings:

{
    type: "select",
    label: "Type",
    model: "type",
    values: [
        "Personal",
        "Business"
    ]
}

If you select the first item, the value will be "Personal" in the model.

Select field with object items:

{
    type: "select",
    label: "Language",
    model: "lang",
    required: true,
    values: function() {
      return [
        { id: "en-GB", name: "English (GB)" },
        { id: "en-US", name: "English (US)" },
        { id: "de", name: "German" },
        { id: "it", name: "Italic" },
        { id: "fr", name: "French" }
      ]
    },
    default: "en-US",
    validator: validators.required
}

If you select the second item, the value will be "en-US" in the model.

Creating an <optgroup> with Select field:

{
    type: "select",
    label: "Choose the fastest",
    model: "the-fastest",
    required: true,
    values: [
        { name: "Marc Marquez", id: "93", group: "MotoGP" },
        { name: "Valentino Rossi", id: "46", group: "MotoGP" },
        { name: "Lewis Hamilton", id: "44", group: "Formula 1" },
        { name: "Sebastian Vettel", id: "5", group: "Formula 1" }
    ],
    validator: validators.required
}

Last updated