WTForms applying widget to RadioField

Issue

I need to create a row of radio buttons in wtforms. So:

buttons = RadioField(choices=[(0, 'Option1), (1, 'Option2'), (2, 'Option3')])

creates:

Option1

Option2

Option3

What I would like to get is:

Option1 Option2 Option3

(for some reason the actual radio buttons don't render here) Meaning instead of unordered list of buttons I'd like a row of radio buttons.

Before posting the question I have tried to solve the problem myself. After reading this post: How can WTForms RadioField generate html without <ul> and <li> tag? I have read about the widgets and buttons here: https://wtforms.readthedocs.io/en/stable/widgets.html#built-in-widgets and here: https://wtforms.readthedocs.io/en/stable/fields.html Seems there is a in-built widget: class wtforms.widgets.Input(input_type=None) that will probably solve the issue by not applying unordered list tags to radio buttons.

I have tried to apply it as follows:

buttons = RadioField(widget=Input(input_type='radio'), choices=[(0, 'Option1'), (1, 'Option2'), (2, 'Option3')])

but I only get the error: AttributeError: 'RadioField' object has no attribute '_value'

My question are:

• will the Input widget display my buttons as a row instead of a list ?
• how do I apply it properly ?
• if not is there any other solution to display the button how I want ?

Solution

TDLR:

All your 3 Q. are answered below:

• Steps:

1. Pick the right way to show it.
2. Style it to make it in-line.
3. Check-out down below for how to do it properly.

from wtforms import widgets


Gender = RadioField('Gender', choices=[('M', 'Male'), ('F', 'Female')],
                        widget=widgets.TableWidget(with_table_tag=True) )

• Import widgets so you can access all the classes and use the class you want inside the widget arg.

Here I used the TableWidget class, you can use other stuff but also you can use table. Then in your static folder add a style.css and style your table. Make it show in one line (in-which the internet is flooded with) how you can style your table.

---

A bit of explanation and how I figured out:

You are actually in the right way.

I'm sure you used validators like this:

from wtforms import validators, ValidationError

class ContactForm(FlaskForm):
    name = TextField("Student Name:", [
                     validators.Required("Plz enter your name.")])

or maybe like this:

from wtforms.validators import DataRequired

class RegistrationForm(FlaskForm):
    username = StringField('Username',
                           validators=[DataRequired(), Length(min=2, max=20)])

And you probably understand how it works, if you want to use validators import them.

Now you might actually ask how is this related?

When you check out this link (you provided) about the Built-in widgets, it says:

class wtforms.widgets.ListWidget(html_tag='ul', prefix_label=True)
  # Renders a list of fields as a ul or ol list.

and by checking the widgets.core module exactly the ListWidget Class (the source code)

class ListWidget(object):

   def __init__(self, html_tag='ul', prefix_label=True):
           assert html_tag in ('ol', 'ul')
           self.html_tag = html_tag
           self.prefix_label = prefix_label

So it checks(by assertion) for selecting either ul or li tags then if you don't want to use either(let's say table) you have to use another class.

• That means by default we are using ul or li HTML tag and how can we change that?

Simple! The same way we did for validators, import the needed classes and change the needed parameter like this:

from wtforms import widgets


Gender = RadioField('Gender', choices=[('M', 'Male'), ('F', 'Female')],
                        widget=widgets.TableWidget(with_table_tag=True) )

In this example I change the ul or li to TableWidget, read about it in the doc here.

It will show as a table like this:

This image shows gender as RadioField with also other fields.

Later you can style the table maybe by adding an id or class and style it.

This's how it will look like in your templates (I'm using Bootstrap as well and planning to style the label and the input seperately):

<div class="custom-control custom-radio custom-control-inline ">
        {{ form.Gender.label(class="custom-control-label") }}
         {{ form.Gender() }}
    </div>

You can also use Flask-Bootstrap, for example in the pic above age(an IntegerField) looks like this in template:

{% import "bootstrap/wtf.html" as wtf %}
.
.
.
<div class="form-group">
        {{ wtf.form_field(form.Age, class='form-control', placeholder='Age') }}
    </div>

This shows all the field in a form but sometimes you want the label alone and the rest alone to style it, so that's what I'm doing in the Gender RadioField.

Answered By - ShifraSec