Radios

Open this example in a new tab

@using GovUkDesignSystemDotNet

@await Html.GovUkRadios(new RadiosViewModel
{
    Name = "where-do-you-live",
    Fieldset = new FieldsetViewModel
    {
        Legend = new FieldsetLegendViewModel
        {
            HtmlOrText = new HtmlOrText("Where do you live?"),
            IsPageHeading = true,
            Classes = ["govuk-fieldset__legend--l"]
        }
    },
    RadioItems = new List<RadioItemViewModel>
    {
        new RadioItemViewModel
        {
            Value = "england",
            Label = new LabelViewModel
            {
                HtmlOrText = new HtmlOrText("England")
            }
        },
        new RadioItemViewModel
        {
            Value = "scotland",
            Label = new LabelViewModel
            {
                HtmlOrText = new HtmlOrText("Scotland")
            }
        },
        new RadioItemViewModel
        {
            Value = "wales",
            Label = new LabelViewModel
            {
                HtmlOrText = new HtmlOrText("Wales")
            }
        },
        new RadioItemViewModel
        {
            Value = "northern-ireland",
            Label = new LabelViewModel
            {
                HtmlOrText = new HtmlOrText("Northern Ireland")
            }
        },
    }
})

Options

Options for `RadiosViewModel`
Name	Type	Description
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.
Fieldset	FieldsetViewModel	Can be used to add a fieldset to the radios component. See options for FieldsetViewModel
Hint	HintViewModel	Can be used to add a hint to the radios component. See options for HintViewModel
ErrorMessage	ErrorMessageViewModel	Can be used to add an error message to the radios component. The error message component will not display if `ErrorMessage` is `null`. See options for ErrorMessageViewModel
FormGroup	FormGroupViewModel	Additional options for the form group containing the radios component. See options for FormGroupViewModel
IdPrefix	string	Optional prefix. This is used to prefix the `Id` attribute for each radio item input, hint and error message, separated by `-`. Defaults to the `Name` option value.
Name	string	Required. Name attribute for all radio items.
RadioItems	List<RadioItemViewModel>	The radio items within the radios component. See options for RadioItemViewModel
Classes	List<string>	Classes to add to the radios container.
Attributes	Dictionary<string, string>	HTML attributes (for example data attributes) to add to the radios container.

Options for `FormGroupViewModel`
Name	Type	Description
Classes	List<string>	Classes to add to the form group (for example to show error state for the whole group).
Attributes	Dictionary<string, string>	HTML attributes (for example data attributes) to add to the form group.
BeforeInput	HtmlOrText	HTML or text to add before the input used by the radios component.
AfterInput	HtmlOrText	HTML or text to add after the input used by the radios component

Examples

Inline radios

Open this example in a new tab

@using GovUkDesignSystemDotNet

@await Html.GovUkRadios(new RadiosViewModel
{
    Name = "changed-name",
    Classes = ["govuk-radios--inline"],
    Fieldset = new FieldsetViewModel
    {
        Legend = new FieldsetLegendViewModel
        {
            HtmlOrText = new HtmlOrText("Have you changed your name?"),
            IsPageHeading = true,
            Classes = ["govuk-fieldset__legend--l"]
        }
    },
    Hint = new HintViewModel
    {
        HtmlOrText = new HtmlOrText("This includes changing your last name or spelling your name differently")
    },
    RadioItems = new List<RadioItemViewModel>
    {
        new RadioItemViewModel
        {
            Value = "yes",
            Label = new LabelViewModel
            {
                HtmlOrText = new HtmlOrText("Yes")
            }
        },
        new RadioItemViewModel
        {
            Value = "no",
            Label = new LabelViewModel
            {
                HtmlOrText = new HtmlOrText("No")
            }
        },
    }
})