How to add class attributes to radio options in Drupal 8 Webform YAML Editor

Question

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.

Answer 1

$form['radio'] = [
  '#type' => 'radios',
  '#title' => 'Choose an answer option',
  '#options' => [
    0 => 'yes',
    1 => 'no',
  ],
  0 => [
    '#description' => 'description for yes',
  ],
  1 => [
    '#description' => 'description for no',
  ]
];