All options are optional and can be left empty
| Name | Type | Default | Description |
|---|---|---|---|
| name | string | lowercase label and replace spaces with '_' no label -> name is generated i.e. 'f1' | This value is is the variable name used |
| label | string | bool | field.name | This is the label displayed for the field, if you want to hide the label then set this to falseThe string can also contain mustache i.e. 'My choice {{value}}' |
| value | string | function | '' | Function will run once at instantiation |
| help | string | '' | This text is used to provide context or help in filling out the field |
| placeholder | string | '' | This text will be visible in the text box until text is entered into the field |
| multiple | boolean | false | Indicates whether multiple items should be selected - if this is true then the value of this field will be an array of all selected values |
| limit | integer | 0 (no limit) | This is used to set the maxLength property and limits the number of characters that can be entered. |
| min | integer | 0 | Used for generating options automatically. This will do nothing unless a 'max' value is also set. |
| max | integer | Options are generated for each integer from the value set for 'min' to the value set for 'max'. | |
| step | integer | 1 | When options are generated from 'min' and 'max' the step between each option is defined by this value |
| options | integer | [] | This is the options to be listed for this field, these are processesed after options generated from min/max/step if 'max' is defined |
| format | integer | {label: '{{label}}', value: '{{value}}'} | This is used to generated labels and values that are based on the options object but not necessarily the raw values. Useful for generating labels and values for existing api data that may be mapped diffently. {{index}} is always internally generated for use as well. |
| columns | integer | 12 | The form is divided into a grid 12 columns wide, this is setting how many of those columns to display this element at, using this you can make milti-column forms |
| target | selector | node | If the target is not set then the field is appended to the parent element which is usually the main form but may be a fieldset | |
| array | boolean | object | false | if set to true or and object then this field will have buttons for adding and removing instances of the item. Additionally the value will become an array of all instances of this field. Further information on this can be found here. |
| show | condition | true | This option controls whether this field should be visible to the user, allowing for fields to only be used if certain conditions are met |
| edit | condition | true | Similar to show but this option controls whether the field is enabled for interaction |
| parse | condition | 'display' | This option determins if the field will be in the data result from myform.get() |
| validate | array | '[]' | This is a set of validations to perform on this field when validate() is called. Note: fields that are empty are not validated, if you require something to be filled in use the required attribute |
| required | condition | false | This is a special case for validation that is calculated live and updates the label to indicate the required status. Validation of this happens when validate() is called |
new gform({fields: [
{type: 'select', name: 'name_example',
options:[1, 2, 3, 4, 5]
},
{type: 'select', label: 'Label Example',
options:[1, 2, 3, 4, 5]
},
{type: 'select',
options:[1, 2, 3, 4, 5]
}
]})new gform({fields: [
{
type: 'select',
label: 'Label Example',
options:[1, 2, 3, 4, 5]
}
]})new gform({fields: [
{
type: 'select',
label: 'Value Example',
value: 'This is a test',
options:[1, 2, 3, 4, 5]
}
]})new gform({fields: [
{
type: 'select',
label: 'Help Example',
help: 'This is some help text',
options:[1, 2, 3, 4, 5]
}
]})new gform({fields: [
{
type: 'select',
label: 'Placeholder Example',
placeholder: 'Placeholder text',
options:[1, 2, 3, 4, 5]
}
]})new gform({fields: [
{
type: 'select',
label: 'Limit Example',
multiple:true,
options:[1, 2, 3, 4, 5]
}
]})new gform({fields: [
{
type: 'select',
label: 'Limit Example',
limit: 3,
multiple:true,
options:[1, 2, 3, 4, 5]
}
]})new gform({fields: [
]})new gform({fields: [
]})new gform({fields: [
{type: 'select', label: 'Min/Max/Step', min: 2, max: 20, step: 2},
]})new gform({fields: [
{
type: 'select',
label: 'Options format',
options: ["No", "Yes"],
format:{label:'{{label}}-{{index}}',
value:'{{index}}'}
}
]})new gform({fields: [
{
type: 'select',
label: 'Column 1',
columns: 4,
options:[1, 2, 3]
},
{
type: 'select',
label: 'Column 2',
columns: 8,
options:[1, 2, 3, 4]
}
]})new gform({fields: [
{type: 'select', name: 'name_example'},
{type: 'select', label: 'Label Example'},
{type: 'select'}
]})new gform({fields: [
{
type: 'select',
label: 'Array Example',
array: {min: 2, max: 4},
options:[1, 2, 3, 4, 5]
}
]})new gform({fields: [
{
label: 'Show select Field',
name: 'show',
type: 'checkbox'
},
{
type: 'select',
label: 'select Field',
show:[{
type: 'matches',
name: 'show',
value: true
}],
options:[1, 2, 3, 4, 5]
}
]})new gform({fields: [
{
label: 'Edit select Field',
name: 'edit',
type: 'checkbox'
},
{
type: 'select',
label: 'select Field',
edit:[{
type: 'matches',
name: 'edit',
value: true
}],
options:[1, 2, 3, 4, 5]
}
]})new gform({fields: [
{
label: 'Parse select Field',
name: 'parse',
type: 'checkbox'
},
{
type: 'select',
label: 'select Field',
parse:[{
type: 'matches',
name: 'parse',
value: true
}],
options:[1, 2, 3, 4, 5]
}
]})new gform({fields: [
{
type: 'select',
label: 'Validate Field',
validate:[{type:'length', min: 2, max: 5}],
options:[1, 2, 3, 4, 5]
}
]})new gform({fields: [
{
type: 'select',
label: 'Required Field',
required: true,
options:[1, 2, 3, 4, 5]
}
]})