Radio 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
multiplebooleanfalseIndicates whether multiple items should be selected - if this is true then the value of this field will be an array of all selected values
limitinteger0 (no limit)This is used to set the maxLength property and limits the number of characters that can be entered.
mininteger0Used for generating options automatically. This will do nothing unless a 'max' value is also set.
maxintegerOptions are generated for each integer from the value set for 'min' to the value set for 'max'.
stepinteger1When options are generated from 'min' and 'max' the step between each option is defined by this value
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: 'radio', name: 'name_example',
    options:[1, 2, 3, 4, 5]
    },
    {type: 'radio', label: 'Label Example',
    options:[1, 2, 3, 4, 5]
    },	
    {type: 'radio',
    options:[1, 2, 3, 4, 5]
    }
]})


Label

new gform({fields: [
{
    type: 'radio', 
    label: 'Label Example',
    options:[1, 2, 3, 4, 5]
    
}
]})


Value

new gform({fields: [
{
  type: 'radio',
  label: 'Value Example',
  value: 'This is a test',
    options:[1, 2, 3, 4, 5]
    
}
]})


Help

new gform({fields: [
  {
    type: 'radio',
    label: 'Help Example',
    help: 'This is some help text',
    options:[1, 2, 3, 4, 5]
    
  }
]})


Placeholder

new gform({fields: [
  {
    type: 'radio',
    label: 'Placeholder Example',
    placeholder: 'Placeholder text',
    options:[1, 2, 3, 4, 5]
    
  }
]})


Multiple

new gform({fields: [
{
    type: 'radio',
    label: 'Limit Example',
    multiple:true,
    options:[1, 2, 3, 4, 5]
    
  }
]})


Limit

new gform({fields: [
{
    type: 'radio',
    label: 'Limit Example',
    limit: 3,
    multiple:true,
    options:[1, 2, 3, 4, 5]
    
  }
]})


Min

new gform({fields: [

]})


Max

new gform({fields: [

]})


Step

new gform({fields: [
    {type: 'radio', label: 'Min/Max/Step', min: 2, max: 20, step: 2},
]})


Columns

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


Target

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


Array

new gform({fields: [
  {
    type: 'radio',
    label: 'Array Example',
    array: {min: 2, max: 4},
    options:[1, 2, 3, 4, 5]
    
  }
]})


Show

new gform({fields: [
  {
    label: 'Show radio Field',
    name: 'show',
    type: 'checkbox'
  },
  {
    type: 'radio',
    label: 'radio Field',
    show:[{
      type: 'matches',
      name: 'show',
      value: true
    }],
    options:[1, 2, 3, 4, 5]
    
  }
]})


Edit

new gform({fields: [
  {
    label: 'Edit radio Field',
    name: 'edit',
    type: 'checkbox'
  },
  {
    type: 'radio',
    label: 'radio Field',
    edit:[{
      type: 'matches',
      name: 'edit',
      value: true
    }],
    options:[1, 2, 3, 4, 5]
    
  }
]})


Parse

new gform({fields: [
  {
    label: 'Parse radio Field',
    name: 'parse',
    type: 'checkbox'
  },
  {
    type: 'radio',
    label: 'radio Field',
    parse:[{
      type: 'matches',
      name: 'parse',
      value: true
    }],
    options:[1, 2, 3, 4, 5]
    
  }
]})


Validate

new gform({fields: [
  {
    type: 'radio',
    label: 'Validate Field',
    validate:[{type:'length', min: 2, max: 5}],
    options:[1, 2, 3, 4, 5]
    
  }
]})


Required

new gform({fields: [
  {
    type: 'radio',
    label: 'Required Field',
    required: true,
    options:[1, 2, 3, 4, 5]
    
  }
]})


© Escher Labs 2019