Select

Parameters you can pass

Parameter	Data type	Description
name	string	Name of input that will be used in the form
id	int	Hidden input ID (stores the value)
items	array of obj	Array of select values
selected	int	ID of selected value from `items` array
class_name	string	Wrapper class (if several classes passed, divide them by Space)
button_class_name	string	Class of the button that opens Select
input_special_class	string	Input class
selected_before	string	Text displayed before the value
disabled	bool	Shows if it's disabled

Parameters of items

Parameter	Data type	Description
id	int	ID value, will be pasted into hidden input when selected by the user
option	string	Value (text)
class_name	string	Custom class of Select element
bg_color	string	HEX code for the background color of the element ( e.g., used for lead stages)

To track changes in the selector value, you need to listen to the controls:change custom event.

$('.my-select-wrapper').on('controls:change', 'input', function (e) {
  var $input = $(e.currentTarget);

  console.log('Input value', $input.val());
});

Selected

self.render({ ref: '/tmpl/controls/select.twig' }, {
    name: 'animal',
    items: [
      { id: 1, option: 'Cat' },
      { id: 2, option: 'Dog' },
    ],
  selected: 1
  });

Text before the value


  self.render({ ref: '/tmpl/controls/select.twig' }, {
    name: 'animal',
    items: [
      { id: 1, option: 'Cat' },
      { id: 2, option: 'Dog' },
    ],
    selected_before: 'Favorite animal: ',
    selected: 2
  });