<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>

CC BY-SA 3.0
2017-07-19T19:18:35.900Z
2017-07-19T19:18:35.900Z
Ben Parizek
<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>

<plugin-sproutforms>
Sprout Forms: creating additional text inputs in radio and checkbox labels
# 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' #}
  
    {%- 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) %}

      
        
        
          {%- if label is defined %}{{ label|raw }}{% endif -%}
          {% if value == 'other' %}
            
          {% endif %}
        
      
    {% endfor %}
  
{% 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.


---

