Drupal 8 module - How to use a template to display a form element?

Question

I'm currently creating a Drupal 8 module. I would like to be able to use a custom template to display a select element in a form. Here is the code I have written so far:

File my_module/templates/colorselector.html.twig:

{% spaceless %}
  <div class="select-wrapper">
    {% set classes = ['form-control', 'color-selector'] %}
    <select{{ attributes.addClass(classes) }}>
      {% for option in options %}
        <option value="{{ option.value }}" data-color="{{ option.code }}"{{ option.selected ? ' selected="selected"' }}>{{ option.label }}</option>
      {% endfor %}
    </select>
  </div>

  <script>
    $('.color-selector').colorselector();
  </script>
{% endspaceless %}

File my_module/my_module.module:

use Drupal\Core\Render\Element;
use Drupal\Core\Render\Element\RenderElement;

function my_module_theme($existing, $type, $theme, $path) {
    return [
        // ...
        'colorselector' => [
            'render element' => 'select'
        ]
    ];
}

function my_module_preprocess_colorselector(&$variables) {
    $element = $variables['element'];
    Element::setAttributes($element, ['id', 'name', 'size']);
    RenderElement::setAttributes($element, ['form-select']);

    $variables['attributes'] = $element['#attributes'];
    $variables['options'] = [];

    foreach ($element['#options'] as $colorName => $colorCode) {
        $option = [];
        $option['value'] = $colorName;
        $option['label'] = $colorName;
        $option['code'] = $colorCode;
        $variables['options'][] = $option;
    }
}

File my_module/src/Form/MyCustomForm.php:

namespace Drupal\my_module\Form;

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;

class MyCustomForm extends FormBase {

    public function buildForm(array $form, FormStateInterface $form_state) {
        // ...
        $form['color'] = [
            '#type' => 'select',
            '#theme' => 'colorselector',
            '#title' => $this->t('Couleur'),
            '#required' => TRUE,
            '#options' => $options
        ];
        // ...
        return $form;
    }

    // ...
}

I get the following error message when I try to display the form: The website encountered an unexpected error. Please try again later.

If I remove '#theme' => 'colorselector' from $form['color'], it displays the form correctly but it does not use my template obviously.

Do you know where the error comes from and how to fix it?

Thanks!

Answer 1

Your hook_theme function should be like this.

function my_module_theme($existing, $type, $theme, $path) {
  return array(
    'color_selector' => array(
      'variables' => array('params' => null),
      'template' => 'colorselector'
    )
  );
}

Now, your template name might be my_module/templates/colorselector.html.twig