The Webform module for Drupal 8 provides support for basic, advanced, and composite inputs/elements. Developers can also create custom elements and composites via code. Sometimes end-users need an interactive visual mechanism to select a complex option like a map location. The Image select element is limited to allowing users to select horizontally-aligned images.
The general concept for creating a custom ‘options’ element’ is to allow site builders to provide HTML/SVG markup that is dynamically converted into a select-able and accessible Webform element.
Below is a straightforward example of some HTML markup that can be enhanced.
SVG support requires the same data-id and data-name attributes being added to the HTML markup. Below is an example of a single clickable element in SVG.
The HTML/SVG markup must provide an option value or text attribute that can be used to create a list of available options. The default recommended ‘value’ attribute names are ‘data-option-value’, ‘data-value’, ‘data-id’, or ‘id’. The default recommended ‘text’ attribute names are ‘data-option-text’, ‘data-text’, ‘data-name’, ‘name’, or ‘title’. The Webform module uses these value/text attribute names to parse and detect the custom element’s available…Read More