Create a custom element in Webform?

Question

I am trying to create a custom Webform element that can be added to any webform. It is a select list, but I am providing the options from a remote API call (they cannot be static or hardcoded).

I can get the element to appear in the admin UI with:

use Drupal\webform\Plugin\WebformElement\Select;

/**
 * Provides a 'tour type' element.
 *
 * @WebformElement(
 *   id = "tour_type",
 *   label = @Translation("Tour Type"),
 *   description = @Translation("Provides a form element to list tour types from Funnel."),
 *   category = @Translation("Options elements"),
 * )
 */
class TourType extends Select {

}

I can add it to a form, and give it options like a regular Select in Webform, but nothing renders on the form.

I was trying to follow this here, but don't quite understand what needs to be done: Why do my custom elements not get rendered?

Do I need a WebformElement plugin, or a new Element class? I don't see how the two are correlated.

Answer 1

You need to create a 'Form Element' to process, validate, and render an input and corresponding 'WebformElement' to integrate the input with the Webform module.

You can use the Webform Example Element module as a starting point.