Checkbox field Options

All options are optional and can be left empty

Name Type Default Description
namestringlowercase label and replace spaces with '_'

no label -> name is generated i.e. 'f1'
This value is is the variable name used
labelstring | boolfield.nameThis is the label displayed for the field, if you want to hide the label then set this to false

The string can also contain mustache i.e.
'My choice {{value}}'
valuestring | function''Function will run once at instantiation
helpstring''This text is used to provide context or help in filling out the field
placeholderstring''This text will be visible in the text box until text is entered into the field
columnsinteger12The 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
targetselector | nodeIf 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
arrayboolean | objectfalseif 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.
showconditiontrueThis option controls whether this field should be visible to the user, allowing for fields to only be used if certain conditions are met
editconditiontrueSimilar to show but this option controls whether the field is enabled for interaction
parsecondition'display'This option determins if the field will be in the data result from myform.get()
validatearray'[]'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
requiredconditionfalseThis 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

examples


Name

new gform({fields: [
    {type: 'checkbox', name: 'name_example'},
    {type: 'checkbox', label: 'Label Example'},	
    {type: 'checkbox'}
]})


Label

new gform({fields: [
{
    type: 'checkbox', 
    label: 'Label Example'
}
]})


Value

new gform({fields: [
{
  type: 'checkbox',
  label: 'Value Example',
  value: 'This is a test'
}
]})


Help

new gform({fields: [
  {
    type: 'checkbox',
    label: 'Help Example',
    help: 'This is some help text'
  }
]})


Placeholder

new gform({fields: [
  {
    type: 'checkbox',
    label: 'Placeholder Example',
    placeholder: 'Placeholder text'
  }
]})


Columns

new gform({fields: [
  {
    type: 'checkbox',
    label: 'Column 1',
    columns: 4
  },
  {
    type: 'checkbox',
    label: 'Column 2',
    columns: 8
  }
]})


Target

new gform({fields: [
    {type: 'checkbox', name: 'name_example'},
    {type: 'checkbox', label: 'Label Example'},	
    {type: 'checkbox'}
]})


Array

new gform({fields: [
  {
    type: 'checkbox',
    label: 'Array Example',
    array: {min: 2, max: 4}
  }
]})


Show

new gform({fields: [
  {
    label: 'Show checkbox Field',
    name: 'show',
    type: 'checkbox'
  },
  {
    type: 'checkbox',
    label: 'checkbox Field',
    show:[{
      type: 'matches',
      name: 'show',
      value: true
    }]
  }
]})


Edit

new gform({fields: [
  {
    label: 'Edit checkbox Field',
    name: 'edit',
    type: 'checkbox'
  },
  {
    type: 'checkbox',
    label: 'checkbox Field',
    edit:[{
      type: 'matches',
      name: 'edit',
      value: true
    }]
  }
]})


Parse

new gform({fields: [
  {
    label: 'Parse checkbox Field',
    name: 'parse',
    type: 'checkbox'
  },
  {
    type: 'checkbox',
    label: 'checkbox Field',
    parse:[{
      type: 'matches',
      name: 'parse',
      value: true
    }]
  }
]})


Validate

new gform({fields: [
  {
    type: 'checkbox',
    label: 'Validate Field',
    validate:[{type:'length', min: 2, max: 5}]
  }
]})


Required

new gform({fields: [
  {
    type: 'checkbox',
    label: 'Required Field',
    required: true
  }
]})


© Escher Labs 2019