Checkboxes for

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

Open this example in a new tab

Model CheckboxesForExampleDefaultViewModel.cs

using GovUkDesignSystemDotNet;

public class CheckboxesForExampleDefaultViewModel
{
    [GovUkValidateCheckboxNumberOfResponsesRange(ErrorMessageIfNothingSelected = "Please select how we should contact you")]
    public List<ContactMethods> HowShouldWeContactYou { get; set; } = [];

    [GovUkValidateRequiredIf(IsRequiredPropertyName = nameof(EmailAddressRequired), ErrorMessageIfMissing = "Enter your email address")]
    public string EmailAddress { get; set; }

    public bool EmailAddressRequired => HowShouldWeContactYou.Contains(ContactMethods.Email);

    [GovUkValidateRequiredIf(IsRequiredPropertyName = nameof(PhoneNumberRequired), ErrorMessageIfMissing = "Enter your phone number")]
    public string PhoneNumber { get; set; }

    public bool PhoneNumberRequired => HowShouldWeContactYou.Contains(ContactMethods.TextMessage);
}

public enum ContactMethods
{
    Email,
    
    [GovUkRadioCheckboxLabelText(Text = "Text message")]
    TextMessage,
    
    [GovUkRadioCheckboxLabelText(Text = "I don't want to be contacted")]
    NoContact,
}

View CheckboxesForExampleDefault.cshtml

@using GovUkDesignSystemDotNet
@model CheckboxesForExampleDefaultViewModel

<form method="post">
    @await Html.GovUkCheckboxesFor(
        m => m.HowShouldWeContactYou,
        new CheckboxesViewModel
        {
            Fieldset = new FieldsetViewModel
            {
                Legend = new FieldsetLegendViewModel
                {
                    HtmlOrText = new HtmlOrText("Where do you live?"),
                    IsPageHeading = true,
                    Classes = ["govuk-fieldset__legend--l"]
                }
            },
        },
        checkboxItemViewModels: new Dictionary<ContactMethods, CheckboxItemViewModel>()
        {
            {
                ContactMethods.Email, new CheckboxItemViewModel
                {
                    Conditional = new HtmlOrText(
                        @<text>
                             @await Html.GovUkTextInputFor(
                                 m => m.EmailAddress,
                                 new TextInputViewModel
                                 {
                                     Label = new LabelViewModel
                                     {
                                         HtmlOrText = new HtmlOrText("Email address")
                                     }
                                 })
                         </text>)
                }
            },
            {
                ContactMethods.TextMessage, new CheckboxItemViewModel
                {
                    Conditional = new HtmlOrText(
                        @<text>
                             @await Html.GovUkTextInputFor(
                                 m => m.PhoneNumber,
                                 new TextInputViewModel
                                 {
                                     Label = new LabelViewModel
                                     {
                                         HtmlOrText = new HtmlOrText("Phone number")
                                     }
                                 })
                         </text>)
                }
            },
            {
                ContactMethods.NoContact, new CheckboxItemViewModel
                {
                    Exclusive = true
                }
            },
        },
        dividersBefore: new Dictionary<ContactMethods, string>
        {
            {ContactMethods.NoContact, "or"}
        }
    )

    @await Html.GovUkButton(new ButtonViewModel
    {
        HtmlOrText = new HtmlOrText("Validate")
    })
</form>

Controller

public IActionResult MyActionName(CheckboxesForExampleDefaultViewModel viewModel)
{
    if (!ModelState.IsValid)
    {
        return View("CheckboxesForExampleDefault", viewModel);
    }

    // Do some work with the validated view-model
    return View("InteractiveExampleValidationSuccessful");
}