Q:

Sprout Forms: creating additional text inputs in radio and checkbox labels

In a customized Sprout Form field, is it possible to have radio buttons and checkboxes with a value of other have an additional text input in the label? This text input would presumably need to be tied to a separate text field in Sprout Forms which would not render with the other normal plaintext fields.
Is there some way to create a custom field that would make it possible to add the boolean radio/checkbox and input together with something like a matrix? We have multiple "other" + text input fields on the page we're trying to create. No set of options will ever have more than one other option.
The resulting markup might look something like this:
{% if type == 'radiobuttons' %} {# Or 'mycustomradiobuttontype' #}
  <ol>
    {%- for key, option in options %}
      {%- set label = (option.label is defined ? option.label : option) %}
      {%- set value = (option.value is defined ? option.value : key) %}
      {%- set checked = (value == selectedValue) %}

      <li class="radio">
        <input type="radio"
          {%- if id %} id="{{ id }}-{{ loop.index }}"{% endif %}
          {%- if name %} name="{{ name }}"{% endif %}
          {%- if value %} value="{{ value }}"{% endif %}
          {%- if checked is defined and checked %} checked{% endif %}
          {{- dataAttributes -}}>
        <label {%- if id %} for="{{ id }}-{{ loop.index }}"{% endif %}>
          {%- if label is defined %}{{ label|raw }}{% endif -%}
          {% if value == 'other' %}
            <input type="text" name="TODO" value="TODO">
          {% endif %}
        </label>
      </li>
    {% endfor %}
  </ol>
{% endif %}

A:

The best approach for Radio Button and Checkbox Fields with a Select Other option would be to create a custom field (or fields) using Sprout Forms Front-end Field API.
You could use the existing Radio Button and Checkbox Fields as a starting point and adapt their UI's to present your users with the Select Other option.
You can review the front-end field classes in the Sprout Forms plugin here:

sproutforms/integrations/sproutforms/fields/SproutFormsCheckboxesField.php
sproutforms/integrations/sproutforms/fields/SproutFormsRadioButtonsField.php

It's on our list to add support for front-end fields with this behavior, but it will likely happen after Craft 3 is released. Please reach out if we can help with answering any questions regarding how to implement custom Front-end Fields or custom development support.

