1

What I'd like to be able to do is provide some extra detail to the HTML markup that the Webform module provides in Drupal 8, specifically being able to classify individual radio button options.

What I Have:

gift_selection:
  '#type': radios
  '#required': true
  '#title': 'Gift Selection'
  '#description': 'Choose from the following free gifts!'
  '#description_display': before
  '#attributes':
    class:
      - promo-gift
  '#options':
    GIFT-BAG: 'Canvas Tote Bag'
    GIFT-KEY: 'Logo Keychain'
    GIFT-BADGE: 'License Plate Badge'
    GIFT-DECAL: 'Reusable Decals'

Results in...

<fieldset class="promo-gift fieldgroup form-composite required form-group" data-drupal-selector="edit-gift-selection" id="edit-gift-selection--wrapper" required="required" aria-required="true">
  <label class="control-label js-form-required form-required">
    <span>Gift Selection</span>
  </label>
  <div class="fieldset-wrapper">
    <span class="field-prefix">
      <div class="description">Choose from the following free gifts!</div>
    </span>
    <div class="brand-border-radius radio">
      <input class="promo-gift form-radio form-control" data-drupal-selector="edit-gift-selection-gift-bag" type="radio" id="edit-gift-selection-gift-bag" name="gift_selection" value="GIFT-BAG">
      <label for="edit-gift-selection-gift-bag" class="control-label option">Canvas Tote Bag</label>
    </div>
    <div class="brand-border-radius radio">
      <input class="promo-gift form-radio form-control" data-drupal-selector="edit-gift-selection-gift-key" type="radio" id="edit-gift-selection-gift-key" name="gift_selection" value="GIFT-KEY">
      <label for="edit-gift-selection-gift-key" class="control-label option">Logo Keychain</label>
    </div>
    <div class="brand-border-radius radio">
      <input class="promo-gift form-radio form-control" data-drupal-selector="edit-gift-selection-gift-badge" type="radio" id="edit-gift-selection-gift-badge" name="gift_selection" value="GIFT-BADGE">
      <label for="edit-gift-selection-gift-badge" class="control-label option">License Plate Badge</label>
    </div>
    <div class="brand-border-radius radio">
      <input class="promo-gift form-radio form-control" data-drupal-selector="edit-gift-selection-gift-decal" type="radio" id="edit-gift-selection-gift-decal" name="gift_selection" value="GIFT-DECAL">
      <label for="edit-gift-selection-gift-decal" class="control-label option">Reusable Decals</label>
    </div>
  </div>
</fieldset>

The code above runs as you might expect, but there's no contextual separation between the div wrappers for the rendered options. I've not been able to find any documentation that suggests that this is even possible, however, I've tried to do the following, and I think it might be able to see what I'm doing, but the renderer of the form doesn't know how to handle the extra info.

What I'd Like To Have:

gift_selection:
  '#type': radios
  '#required': true
  '#title': 'Gift Selection'
  '#description': 'Choose from the following free gifts!'
  '#description_display': before
  '#attributes':
    class:
      - promo-gift
  '#options':
    GIFT-BAG:
      '#label': 'Canvas Tote Bag'
      '#attributes':
        class:
          - gift-bag
    GIFT-KEY:
      '#label': 'Logo Keychain'
      '#attributes':
        class:
          - gift-key
    GIFT-BADGE:
      '#label': 'License Plate Badge'
      '#attributes':
        class:
          - gift-badge
    GIFT-DECAL:
      '#label': 'Reusable Decals'
      '#attributes':
        class:
          - gift-decal

Resulting in...

<fieldset class="promo-gift fieldgroup form-composite required form-group" data-drupal-selector="edit-gift-selection" id="edit-gift-selection--wrapper" required="required" aria-required="true">
  <label class="control-label js-form-required form-required">
    <span>Gift Selection</span>
  </label>
  <div class="fieldset-wrapper">
    <span class="field-prefix">
      <div class="description">Choose from the following free gifts!</div>
    </span>
    <div class="brand-border-radius radio gift-bag">
      <input class="promo-gift form-radio form-control" data-drupal-selector="edit-gift-selection-gift-bag" type="radio" id="edit-gift-selection-gift-bag" name="gift_selection" value="GIFT-BAG">
      <label for="edit-gift-selection-gift-bag" class="control-label option">Canvas Tote Bag</label>
    </div>
    <div class="brand-border-radius radio gift-key">
      <input class="promo-gift form-radio form-control" data-drupal-selector="edit-gift-selection-gift-key" type="radio" id="edit-gift-selection-gift-key" name="gift_selection" value="GIFT-KEY">
      <label for="edit-gift-selection-gift-key" class="control-label option">Logo Keychain</label>
    </div>
    <div class="brand-border-radius radio gift-badge">
      <input class="promo-gift form-radio form-control" data-drupal-selector="edit-gift-selection-gift-badge" type="radio" id="edit-gift-selection-gift-badge" name="gift_selection" value="GIFT-BADGE">
      <label for="edit-gift-selection-gift-badge" class="control-label option">License Plate Badge</label>
    </div>
    <div class="brand-border-radius radio gift-decal">
      <input class="promo-gift form-radio form-control" data-drupal-selector="edit-gift-selection-gift-decal" type="radio" id="edit-gift-selection-gift-decal" name="gift_selection" value="GIFT-DECAL">
      <label for="edit-gift-selection-gift-decal" class="control-label option">Reusable Decals</label>
    </div>
  </div>
</fieldset>

For example, notice the difference in the wrapper div class attribute values:

brand-border-radius radio vs. brand-border-radius radio gift-bag

What actually ends up happening with this approach is that the values supplied for the options are displayed as Array, which leads me to believe there is a display file that I need to extend to look for these additional attributes. Not sure where to go for this or what the best practice here would be if I need to modify a specific component dealing with Webforms so it doesn't break with a future update.

3
  • 1 way to do this in D7 (I know you're on D8) ... is in your theme to provide after_build function to change the form element after the form is built. Then you can force the outputted HTML to make use of your custom FAPI elements as need be. I haven't had to do this in D8 yet, so I'm not sure of the correct approach there. Some D7 info is here drupal.stackexchange.com/a/49230/3279 or this on #process stackoverflow.com/q/3928013/1491507 – tenken Jun 7 '17 at 15:10
  • Were you able to resolve this? – Prerit Mohan Feb 23 '19 at 20:34
  • 1
    @PreritMohan Sorry, this is almost 2 years old and what we ended up doing was a core mod and documented the change to the team that inherited the project after deployment. – MLK.DEV Feb 27 '19 at 17:03
0
$form['radio'] = [
  '#type' => 'radios',
  '#title' => 'Choose an answer option',
  '#options' => [
    0 => 'yes',
    1 => 'no',
  ],
  0 => [
    '#description' => 'description for yes',
  ],
  1 => [
    '#description' => 'description for no',
  ]
];
1
  • Welcome to Drupal Answers! Not sure how this answers the question. Can you explain the code, and how it adds classes to the radio options? – mpdonadio Feb 27 '20 at 13:21

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.