Array of field objects. (NEW in 2.0+) more expressive way to define fields, see this demo. For each input or select control in the HTML template of the form, you need to define a corresponding object in the fields array. A field object has following structure: field: { field : '', // id of field, must match name of input or select type : null, // type of field (same types as for w2field object) options: { format: null, // date/time format for data/time fields minLength: null, // min length for text field or min search for list/combo/enum fields items: [] // list of items for checks/radio/select/enum/combo/list field types selected: null // item that is selected fro enum/combo/list types }, required : false, // required or not hidden : undefined, // field hidden/visible disabled : undefined, // field disabled/enabled html : { // info for auto generation (see generateHTML) label : '', // caption for the field attr : '', // attributes inside input/select control style : '', // style for the whole field text : '', // text to display on the right from the control span : undefined, // number of span, will be added to class="w2ui-span{span}" page : undefined, // page number if there are tabs in the form column : undefined, // column number, can be 'before' or 'after' anchor : '', // field anchor, to attach fields at the end of other fields // group properties group : '', // starts a new group with this title groupTitleStyle : '', // style for the group title groupStyle : '', // style for the group's fields container groupCollapsible: false, // flag to indicate if the group is collapsible // for map and array types key: { attr: '', // input field attrs for eeach key field text: '' // text after each key field }, value: { attr: '', // input field attrs for eeach key field text: '' // text after each key field } } } Note: field.html.groupCollapsible is misspelled field.html.groupCollapsable in w2ui 1.5.0 The form supports all types that $().w2field({}) supports and few more types in addition. The complete list of all types are:

• alphanumeric - text field that only allows alpha numberic characters
• array - builds an array of key/value pairs, uses field.options.keys, field.options.values
• check - list of checkboxes, uses options.items
• checks - alias for check
• checkbox - single checkbox
• color - color picker
• combo - field with auto complete items, user field.options.items
• currency - alias for money
• date - date picker
• datetime - date and time picker
• div - div field, uses field.html.html (same as custom)
• email - email validated field
• enum - multi select element, uses field.options.items
• file - html file input
• float - float number only, uses field.options
• group - type = group is only supported in consturctor
• hex - hex number
• html - just some html instead of the field, uses field.html.html (same as empty)
• int - integer number
• list - drop down list, uses field.options.items
• map - builds a map of unique key/value pairs, uses field.options.keys, field.options.values
• money - number in money format, for international formats seee w2utils.settings
• pass - password field
• password - alias for pass
• percent - number as percenage
• radio - list of radio items, uses field.options.items
• select - html select element, uses field.options.items
• text - any text
• textarea - text area
• time - time picker
• toggle - toggle control, similar to checkbox

If you have a container: <div id="form" style="width: 500px; height: 300px;"></div> The form definition will be: let form = new w2form({ name : 'form', fields : [ { field: 'first_name', type: 'text' }, { field: 'last_name', type: 'text' }, { field: 'field_textarea', type: 'text' } ], actions : { "Reset": function () { this.clear(); }, "Save": function () { this.save(); } } });