Creating a custom widget

Just like we can create custom fields and validators, we can also create custom widgets. These widgets allow us to control how our fields will look like at the frontend. Each field type has a widget associated with it. WTForms, by itself, provides a lot of basic and HTML5 widgets. To understand how to write a custom widget, we will convert our custom selection field for category into a radio field. I agree with many who would argue that we can directly use the radio field provided by WTForms. Here, we are just trying to understand how to do it ourselves.

Note

The widgets provided by default by WTForms can be found at https://wtforms.readthedocs.org/en/latest/widgets.html.

How to do it…

In our previous recipe, we created CategoryField. This field used the Select widget, which was provided by the Select superclass. Let's replace the Select widget with a radio input:

from wtforms.widgets import html_params, Select, HTMLString

class CustomCategoryInput(Select):

    def...