Skip to main content

Select

Supported products
  • Central CMS
  • Central Forms
  • Central Connect

Generates a select input field.

Basic usage​

{{
  form.select({
    'label': 'Pick a colour',
    'id': 'guid-' ~ random(),
    'options': [
      {
        'label': 'Choose',
        'value': ''
      },
      {
        'label': 'Red',
        'value': 'colour_red'
      },
      {
        'label': 'Blue',
        'value': 'colour_blue'
      }
    ]
  })
}}

Helper options​

You can configure this helper using the common helper options. The following options are specific to this helper.

OptionTypeDescription
multiplebooleanWhether multiple options can be selected (default: false)
optionsarrayAn array of labels and values to use as options
selectedstringThe value of the item in options that should be initially selected
sizeintThe number of options to display when the list is shown

Selected option​

Single select​

Set the currently selected item by passing the option’s value to the main selected option.

{{
  form.select({
    'label': 'Pick a colour',
    'id': 'guid-' ~ random(),
    'selected': 'colour_blue',
    'options': [
      {
        'label': 'Choose',
        'value': ''
      },
      {
        'label': 'Red',
        'value': 'colour_red'
      },
      {
        'label': 'Blue',
        'value': 'colour_blue'
      }
    ]
  })
}}

Multiple select​

For multiple selects, pass the selected values as an array. If you want this to look much nicer consider using the select2 helper instead.

{{
  form.select({
    'label': 'Pick colours',
    'id': 'guid-' ~ random(),
    'multiple': true,
    'selected': ['colour_red', 'colour_blue'],
    'options': [
      {
        'label': 'Choose',
        'value': ''
      },
      {
        'label': 'Red',
        'value': 'colour_red'
      },
      {
        'label': 'Blue',
        'value': 'colour_blue'
      }
    ]
  })
}}

Disabled options​

You can disable the entire input as normal by passing the 'disabled': true option (see the disabling elements guide for more information).

You can disable specific options by adding the disabled attribute to the option array.

{{
  form.select({
    'label': 'Pick a colour',
    'id': 'guid-' ~ random(),
    'options': [
      {
        'label': 'Choose',
        'value': ''
      },
      {
        'label': 'Red',
        'value': 'colour_red',
        'disabled': true
      },
      {
        'label': 'Blue',
        'value': 'colour_blue'
      }
    ]
  })
}}

Optgroups​

Your options can be arranged within optgroups using the optgroup nested syntax.

{{
  form.select2({
    'label': 'My label',
    'id': 'guid-' ~ random(),
    'options':
    [
      {
        'label': 'optgroup one',
        'options': [
          {
            'label': 'alpha',
            'value': 'val-alpha'
          },
          {
            'label': 'bravo',
            'value': 'val-bravo'
          }
        ]
      },
      {
        'label': 'optgroup two',
        'options': [
          {
            'label': 'charlie',
            'value': 'val-charlie'
          },
          {
            'label': 'delta',
            'value': 'val-delta'
          }
        ]
      }
    ]
  })
}}