I have a List (text) field on a comment type. This field is required and only one option may be chosen, so a radio button is how it will be rendered. I would now like to change the way the radio buttons are rendered to allow for additional necessary styling. I have never done this before.

Currently each element is styled as such:

<div id="edit-field-list" class="form-radios"><div class="js-form-item form-item js-form-type-radio form-type-radio js-form-item-field-list form-item-field-list">   <input data-drupal-selector="edit-field-list-1" type="radio" id="edit-field-list-1" name="field_list" value="1" class="form-radio">   <label for="edit-field-list-1" class="option">Item #1</label> </div> 

But, let’s say that I wanted to add an HTML element inside this <div> or move one around. I have created a module which adds a widget for this field type. Once this widget is selected, I have tried modifying the field using a number of different methods, but to no avail. I have been making sure to regularly clear the cache since I have been using the .module file and a template.

I’ve tried using a template file, radios.html.twig and adding it using various hooks, such as hook_theme_registry_alter() and hook_theme(). I’ve tried using hook_form_alter().

I have never modified the rendering of an element like this before and the documentation all seems to be different enough from what I am trying to do so as to only add confusion.

Could anyone please tell me how to accomplish this? I’m happy to add clarification as needed.

Additionally, is using a Field Widget the best way to accomplish this? It seems the correct way to me, since I only want it to affect the input element on the comment creation/edit form, but I’m open to being wrong.