Radios

A Radios component is used when there is only one option allowed from a list.

from django import forms

from crispy_forms_gds.choices import Choice
from crispy_forms_gds.helper import FormHelper
from crispy_forms_gds.layout import Field, Layout, Size, Submit


class RadiosForm(forms.Form):

    name = forms.ChoiceField(
        choices=(("yes", "Yes"), ("no", "No")),
        widget=forms.RadioSelect,
        label="Have you changed your name?",
        help_text="This includes changing your last name or spelling your name differently.",
        error_messages={"required": "Enter whether your name has changed"},
    )

    METHODS = (
        Choice("email", "Email", hint="Do not use an email address from work"),
        Choice("phone", "Phone", divider="Or"),
        Choice("text", "Text message"),
    )

    method = forms.ChoiceField(
        choices=METHODS,
        widget=forms.RadioSelect,
        label="How would you like to be contacted?",
        help_text="Select the options that is best for you.",
        error_messages={
            "required": "Select the best way to send a confirmation message"
        },
    )

    def __init__(self, *args, **kwargs):
        super(RadiosForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.layout = Layout(
            Field.radios("name", legend_size=Size.MEDIUM, legend_tag="h1", inline=True),
            Field.radios(
                "method",
                legend_size=Size.MEDIUM,
                small=True,
            ),
            Submit("submit", "Submit"),
        )

You can see this form live in the Demo site.

The set of radio buttons are wrapped in a <fieldset> with a <legend>. The field’s label used as the legend title. The keyword argument, legend_size is used to change the size and weight of the font of the legend, otherwise the legend will be the same size as body text, which is a bit unimposing. The Size class defines a set of string constants, SMALL, MEDIUM, LARGE and EXTRA_LARGE to make things a little more readable but you can just use the corresponding values: 's', 'm', 'l' or 'xl' directly if you prefer.

Im a multi-page form, where a single set of radio buttons is the only component on a page, you can wrap the legend in an <h1> header tag by setting the legend_tag keyword argument to 'h1' - leaving out the angle brackets. This avoids the duplication, particularly for screen readers, of having a page title then the radio buttons’ legend effectively saying the same thing.

If you use the Choice class to create the list of choice for the field you can set a hint for each item as needed. You can also set divider that will display a separator <div> with a string after the radio button.