Checkboxes

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

Open this example in a new tab

@using GovUkDesignSystemDotNet

@await Html.GovUkCheckboxes(new CheckboxesViewModel
{
    Name = "waste",
    Fieldset = new FieldsetViewModel
    {
        Legend = new FieldsetLegendViewModel
        {
            HtmlOrText = new HtmlOrText("Which types of waste do you transport?"),
            IsPageHeading = true,
            Classes = ["govuk-fieldset__legend--l"]
        }
    },
    Hint = new HintViewModel
    {
        HtmlOrText = new HtmlOrText("Select all that apply")
    },
    CheckboxItems = new List<CheckboxItemViewModel>
    {
        new CheckboxItemViewModel
        {
            Value = "carcasses",
            Label = new LabelViewModel
            {
                HtmlOrText = new HtmlOrText("Waste from animal carcasses")
            }
        },
        new CheckboxItemViewModel
        {
            Value = "mines",
            Label = new LabelViewModel
            {
                HtmlOrText = new HtmlOrText("Waste from mines or quarries")
            }
        },
        new CheckboxItemViewModel
        {
            Value = "farm",
            Label = new LabelViewModel
            {
                HtmlOrText = new HtmlOrText("Farm or agricultural waste")
            }
        },
    }
})

Options

Options for CheckboxesViewModel

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 checkboxes component. See options for FieldsetViewModel
Hint	HintViewModel	Can be used to add a hint to the checkboxes component. See options for HintViewModel
ErrorMessage	ErrorMessageViewModel	Can be used to add an error message to the checkboxes 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 checkboxes component. See options for FormGroupViewModel
IdPrefix	string	Optional prefix. This is used to prefix the Id attribute for each checkbox item input, hint and error message, separated by -. Defaults to the Name option value.
Name	string	Required. Name attribute for all checkbox items.
CheckboxItems	List<CheckboxItemViewModel>	The checkbox items within the checkboxes component. See options for CheckboxItemViewModel
Classes	List<string>	Classes to add to the checkboxes container.
Attributes	Dictionary<string, string>	HTML attributes (for example data attributes) to add to the checkboxes 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 checkboxes component.
AfterInput	HtmlOrText	HTML or text to add after the input used by the checkboxes component

Examples

With Hints, Error and None

Open this example in a new tab

@using GovUkDesignSystemDotNet

@await Html.GovUkCheckboxes(new CheckboxesViewModel
{
    Name = "city",
    Fieldset = new FieldsetViewModel
    {
        Legend = new FieldsetLegendViewModel
        {
            HtmlOrText = new HtmlOrText("Which cities are you travelling to?"),
            IsPageHeading = true,
            Classes = ["govuk-fieldset__legend--l"]
        }
    },
    Hint = new HintViewModel
    {
        HtmlOrText = new HtmlOrText("Select all that apply")
    },
    CheckboxItems = new List<CheckboxItemViewModel>
    {
        new CheckboxItemViewModel
        {
            Value = "paris",
            Label = new LabelViewModel
            {
                HtmlOrText = new HtmlOrText("Paris")
            },
            Hint = new HintViewModel
            {
                HtmlOrText = new HtmlOrText("The capital of France")
            }
        },
        new CheckboxItemViewModel
        {
            Value = "lisbon",
            Label = new LabelViewModel
            {
                HtmlOrText = new HtmlOrText("Lisbon")
            },
            Hint = new HintViewModel
            {
                HtmlOrText = new HtmlOrText("The capital of Portugal")
            }
        },
        new CheckboxItemViewModel
        {
            Value = "madrid",
            Label = new LabelViewModel
            {
                HtmlOrText = new HtmlOrText("Madrid")
            },
            Hint = new HintViewModel
            {
                HtmlOrText = new HtmlOrText("The capital of Spain")
            }
        },
        new CheckboxItemViewModel
        {
            Divider = "or"
        },
        new CheckboxItemViewModel
        {
            Value = "none",
            Label = new LabelViewModel
            {
                HtmlOrText = new HtmlOrText("None")
            },
            Exclusive = true
        },
    },
    ErrorMessage = new ErrorMessageViewModel
    {
        HtmlOrText = new HtmlOrText("Select the cities you are travelling to, or None")
    }
})