Checkbox item

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

Open this example in a new tab

@using GovUkDesignSystemDotNet

@await Html.GovUkCheckboxItem(new CheckboxItemViewModel
{
    Name = "declaration",
    Value = "confirmed",
    Label = new LabelViewModel
    {
        HtmlOrText = new HtmlOrText("I declare the information provided above is correct")
    }
})

Options

Options for CheckboxItemViewModel

Name	Type	Description
Id	string	Specific ID attribute for the checkbox item. Defaults to the value of {Name}-{Value}.
Name	string	Required. Name attribute for the checkbox item.
Value	string	Required. Value for the checkbox input.
Label	LabelViewModel	Required. The label used by the checkbox. See options for LabelViewModel
Hint	HintViewModel	Can be used to add a hint to the checkbox item. See options for HintViewModel
Divider	string	Divider text to separate checkbox items, for example the text "or".
Checked	bool	Whether the checkbox should be checked when the page loads.
Conditional	HtmlOrText	Provide additional content to reveal when the checkbox is checked.
Exclusive	bool	If set to true, implements a ‘None of these’ type behaviour via JavaScript when checkboxes are clicked.
Disabled	bool	If true, checkbox 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 checkbox input tag.

Examples

With Hint and Conditional

Open this example in a new tab

@using GovUkDesignSystemDotNet

<div class="govuk-checkboxes" data-module="govuk-checkboxes">
    @await Html.GovUkCheckboxItem(new CheckboxItemViewModel
    {
        Name = "mailing-list",
        Value = "sign-up",
        Label = new LabelViewModel
        {
            HtmlOrText = new HtmlOrText("Receive our monthly email newsletter")
        },
        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>