0

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.

0

Additionally, is using a Field Widget the best way to accomplish this?

I would say yes, it's more work than a hook, but it makes things configurable most times hidden in a form alter hook. The result is the same. You can add to the form array additional render elements like div containers or attributes to the input element itself. Based on this add a theme suggestion, in case you want to add more markup in a template. See this answer from @Kevin.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.