Render Select2Widget as radio buttons

[rez0n]

Goal
I need to render Select2Widget (choices) as radio buttons select.
Why I need this.
I have user type and dependent on it ModelSelect2Widget which rendered results need to be based on user type.

Problem
Have no idea how to render Select2Widget options as radio select. I tried to render it manually, but no success.

{% for pk, choice in form.type.field.widget.choices %}
    <div class="custom-control custom-radio custom-control-inline">
        <input id="id_{{form.type.name}}_{{ forloop.counter0 }}" name="{{form.type.name}}"
            type="{{form.type.field.widget.input_type}}" value="{{pk}}" class="custom-control-input" required
            {% ifequal form.type.data pk.0 %} checked="checked" {% endifequal %} />
        <label for="id_{{form.type.name}}_{{ forloop.counter0 }}" class="custom-control-label">{{ choice }}</label>
    </div>
    {% endfor %}

Code Snippet

class UserCreationForm(PopRequestMixin, CreateUpdateAjaxMixin, UserCreationForm):
    ...
    CHOICES = [(1, 'UserType1'), (2, 'UserType2')]
    type = forms.ChoiceField(
        choices=CHOICES, widget=s2forms.Select2Widget, initial='1')
        
       class Meta:
        model = User
        fields = ['email', 'name', 'type', 'organization', 'password1', 'password2']
        error_css_class = 'is-invalid'

        widgets = {
            "email": widgets.EmailInput(attrs={
                'class': 'form-control'
            }),

            "name": widgets.TextInput(attrs={
                'class': 'form-control'
            }),

            "organization": s2forms.ModelSelect2Widget(
                search_fields=["name__icontains",],
                dependent_fields={'type': 'type_id'},
                attrs={
                    'class': 'form-control'
                }),
        }

If I display fields as is - it is working correctly, but I need to change user type select to the radio buttons instead of select2 picker.
Thanks in advance.

[codingjoe]

Hi,

The problem is, that a radio button isn't a single input. The script currently isn't built to support fields with values from multiple inputs. We currently use jQuery's val method on a name-based selector. I presume you will get some kind of error in your browser console because val is called on an array?

If you get any error, maybe you can share it as a bug, and we can see if we can't fix it.

Best,
Joe