Radios - Jon’s website

View the code for this example

{% from 'components/radios.njk' import radios as radios %}

{{ radios({
    title: "Are you a fan of this website?",
    id: "are-you-a-fan-of-this-website",
    items: [
        {
            id: "yes",
            title: "Yes",
            hint: "Chose this option to vote in the affirmative"
        },
        {
            id: "no",
            title: "No",
            hint: "Chose this option to vote in the negative"
        }
    ]
}) }}

Radios in a card

Open this example in a new tab

View the code for this example

{% from 'components/radios.njk' import radios as radios %}

{{ radios({
    title: "Are you a fan of this website?",
    id: "are-you-a-fan-of-this-website",
    styleAsCards: true,
    items: [
        {
            id: "yes",
            title: "Yes",
            hint: "Chose this option to vote in the affirmative"
        },
        {
            id: "no",
            title: "No",
            hint: "Chose this option to vote in the negative"
        }
    ]
}) }}

Nunjucks Macro parameters

Name	Type	Description
`title`	string	Required. The title of the question.
`id`	string	Required. A unique identifier, passed as the `name` parameter.
`styleAsCards`	bool	Set to `true` to style radios as cards.
`items.id`	string	Required. A unique identifier for the item.
`items.title`	string	Required. The title for each item.
`items.hint`	string	An optional hint for each item.
`items.header`	html	Optional html used when `styleAsCards === true`.