Answers.Body: <p>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 <a href="https://sprout.barrelstrengthdesign.com/craft-plugins/forms/docs/customization/custom-front-end-fields" rel="nofollow noreferrer">Front-end Field API</a>.</p>
  
  <p>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.</p>
  
  <p>You can review the front-end field classes in the Sprout Forms plugin here:</p>
  
  <ul>
  <li>sproutforms/integrations/sproutforms/fields/SproutFormsCheckboxesField.php</li>
  <li>sproutforms/integrations/sproutforms/fields/SproutFormsRadioButtonsField.php</li>
  </ul>
  
  <p>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.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-07-19T19:18:35.900Z
Answers.LastActivityDate: 2017-07-19T19:18:35.900Z
Answers.UserDisplayName: Ben Parizek
Body: <p>In a customized Sprout Form field, is it possible to have radio buttons and checkboxes with a <code>value</code> of <code>other</code> have an additional text input in the <code>label</code>? 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.</p>
  
  <p>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 <code>options</code> will ever have more than one <code>other</code> option.</p>
  
  <p>The resulting markup might look something like this:</p>
  
  <pre><code>{% if type == 'radiobuttons' %} {# Or 'mycustomradiobuttontype' #}
    &lt;ol&gt;
      {%- 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) %}
  
        &lt;li class="radio"&gt;
          &lt;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 -}}&gt;
          &lt;label {%- if id %} for="{{ id }}-{{ loop.index }}"{% endif %}&gt;
            {%- if label is defined %}{{ label|raw }}{% endif -%}
            {% if value == 'other' %}
              &lt;input type="text" name="TODO" value="TODO"&gt;
            {% endif %}
          &lt;/label&gt;
        &lt;/li&gt;
      {% endfor %}
    &lt;/ol&gt;
  {% endif %}
  </code></pre>
  
Tags: <plugin-sproutforms>
Title: Sprout Forms: creating additional text inputs in radio and checkbox labels
ThreadText: # Sprout Forms: creating additional text inputs in radio and checkbox labels
  
  (Asked by: username_0 on 2017-07-19)
  
  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 %}
  
  ```
  
  **Tags:** plugin-sproutforms
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2017-07-19. Score: 1 | Accepted answer
  
  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](https://sprout.barrelstrengthdesign.com/craft-plugins/forms/docs/customization/custom-front-end-fields).
  
  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.
  
  
  ---
  
  