Radio item

Read more about the radios component on the Gov.UK Design System website

Open this example in a new tab

@using GovUkDesignSystemDotNet

@await Html.GovUkRadioItem(new RadioItemViewModel
{
    Name = "where-do-you-live",
    Value = "england",
    Label = new LabelViewModel
    {
        HtmlOrText = new HtmlOrText("England")
    }
})

Options

Options for RadioItemViewModel

Name	Type	Description
Id	string	Specific ID attribute for the radio item. Defaults to the value of {Name}-{Value}.
Name	string	Required. Name attribute for the radio item.
Value	string	Required. Value for the radio input.
Label	LabelViewModel	Required. The label used by the radio. See options for LabelViewModel
Hint	HintViewModel	Can be used to add a hint to the radio item. See options for HintViewModel
Divider	string	Divider text to separate radio items, for example the text "or".
Checked	bool	Whether the radio should be checked when the page loads.
Conditional	HtmlOrText	Provide additional content to reveal when the radio is checked.
Disabled	bool	If true, radio will be disabled.
DescribedBy	List<string>	One or more element IDs to add to the input aria-describedby attribute, used to provide additional descriptive information for screenreader users.
Attributes	Dictionary<string, string>	HTML attributes (for example data attributes) to add to the radio input tag.

Examples

With Hint and Conditional

Open this example in a new tab

@using GovUkDesignSystemDotNet

<div class="govuk-radios" data-module="govuk-radios">
    @await Html.GovUkRadioItem(new RadioItemViewModel
    {
        Name = "preferred-contact",
        Value = "email",
        Label = new LabelViewModel
        {
            HtmlOrText = new HtmlOrText("Email")
        },
        Hint = new HintViewModel
        {
            HtmlOrText = new HtmlOrText("We won't use your email address for any other purposes")
        },
        Conditional = new HtmlOrText(
            @<text>
                 @await Html.GovUkTextInput(new TextInputViewModel
                 {
                     Name = "email-address",
                     Label = new LabelViewModel
                     {
                         HtmlOrText = new HtmlOrText("Email address")
                     }
                 })
             </text>)
    })
</div>