ComponentCheckboxes
56 of 56 upstream examples match.
Razor component: <NhsukCheckboxes>
Default
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
hint="Select all options that are relevant to you"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message"
}
]
}) }}Default
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
hint="Select all options that are relevant to you"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
},
])"
small="true"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message"
}
],
"small": true
}) }}Disabled
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
hint="Select all options that are relevant to you"
id-prefix="disabled"
name="example"
disabled="true"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
IdPrefix="disabled"
Name="example"
Disabled="true"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "disabled",
"name": "example",
"disabled": true,
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message"
}
]
}) }}Disabled
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
hint="Select all options that are relevant to you"
id-prefix="disabled"
name="example"
disabled="true"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
},
])"
small="true"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
IdPrefix="disabled"
Name="example"
Disabled="true"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "disabled",
"name": "example",
"disabled": true,
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message"
}
],
"small": true
}) }}Disabled input
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
hint="Select all options that are relevant to you"
id-prefix="disabled-input"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Disabled = true,
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
IdPrefix="disabled-input"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Disabled = true,
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "disabled-input",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message",
"disabled": true
}
]
}) }}Disabled input
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
hint="Select all options that are relevant to you"
id-prefix="disabled-input"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Disabled = true,
},
])"
small="true"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
IdPrefix="disabled-input"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Disabled = true,
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "disabled-input",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message",
"disabled": true
}
],
"small": true
}) }}Disabled with enabled input
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
hint="Select all options that are relevant to you"
id-prefix="disabled-enabled-input"
name="example"
disabled="true"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Disabled = false,
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
IdPrefix="disabled-enabled-input"
Name="example"
Disabled="true"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Disabled = false,
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "disabled-enabled-input",
"name": "example",
"disabled": true,
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message",
"disabled": false
}
]
}) }}Disabled with enabled input
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
hint="Select all options that are relevant to you"
id-prefix="disabled-enabled-input"
name="example"
disabled="true"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Disabled = false,
},
])"
small="true"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
IdPrefix="disabled-enabled-input"
Name="example"
Disabled="true"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Disabled = false,
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "disabled-enabled-input",
"name": "example",
"disabled": true,
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message",
"disabled": false
}
],
"small": true
}) }}Inline
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Which nipple has changed?",
Size = "l",
},
})"
id-prefix="inline"
name="example"
inline="true"
items="@([
new CheckboxesItemsItem
{
Value = "right",
Text = "Right nipple",
},
new CheckboxesItemsItem
{
Value = "left",
Text = "Left nipple",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Which nipple has changed?",
Size = "l",
},
})"
IdPrefix="inline"
Name="example"
Inline="true"
Items="@([
new CheckboxesItemsItem
{
Value = "right",
Text = "Right nipple",
},
new CheckboxesItemsItem
{
Value = "left",
Text = "Left nipple",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "Which nipple has changed?",
"size": "l"
}
},
"idPrefix": "inline",
"name": "example",
"inline": true,
"items": [
{
"value": "right",
"text": "Right nipple"
},
{
"value": "left",
"text": "Left nipple"
}
]
}) }}Inline
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Which nipple has changed?",
Size = "m",
},
})"
id-prefix="inline"
name="example"
inline="true"
items="@([
new CheckboxesItemsItem
{
Value = "right",
Text = "Right nipple",
},
new CheckboxesItemsItem
{
Value = "left",
Text = "Left nipple",
},
])"
small="true"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Which nipple has changed?",
Size = "m",
},
})"
IdPrefix="inline"
Name="example"
Inline="true"
Items="@([
new CheckboxesItemsItem
{
Value = "right",
Text = "Right nipple",
},
new CheckboxesItemsItem
{
Value = "left",
Text = "Left nipple",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "Which nipple has changed?",
"size": "m"
}
},
"idPrefix": "inline",
"name": "example",
"inline": true,
"items": [
{
"value": "right",
"text": "Right nipple"
},
{
"value": "left",
"text": "Left nipple"
}
],
"small": true
}) }}Legend
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = "s",
},
})"
hint="Select all options that are relevant to you"
id-prefix="custom-size"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = "s",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
IdPrefix="custom-size"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "s"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "custom-size",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
]
}) }}Legend
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = "m",
},
})"
hint="Select all options that are relevant to you"
id-prefix="custom-size"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = "m",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
IdPrefix="custom-size"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "m"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "custom-size",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
]
}) }}Legend
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = "l",
},
})"
hint="Select all options that are relevant to you"
id-prefix="custom-size"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = "l",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
IdPrefix="custom-size"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "l"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "custom-size",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
]
}) }}Legend
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = "xl",
},
})"
hint="Select all options that are relevant to you"
id-prefix="custom-size"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = "xl",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
IdPrefix="custom-size"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "xl"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "custom-size",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
]
}) }}Legend
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = "l",
Id = "custom-id",
},
})"
hint="Select all options that are relevant to you"
id-prefix="custom-size"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = "l",
Id = "custom-id",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
IdPrefix="custom-size"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "l",
"id": "custom-id"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "custom-size",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
]
}) }}With "all" option
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Which vaccines would you like to include?",
Size = "l",
},
})"
id-prefix="all"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "all",
Text = "All 9 vaccines",
Behaviour = "inclusive",
},
new CheckboxesItemsItem
{
Divider = "or",
Behaviour = "inclusive",
},
new CheckboxesItemsItem
{
Value = "4in1",
Text = "4-in-1 pre-school booster",
},
new CheckboxesItemsItem
{
Value = "6in1",
Text = "6-in-1",
},
new CheckboxesItemsItem
{
Value = "hpv",
Text = "HPV",
},
new CheckboxesItemsItem
{
Value = "menb",
Text = "MenB",
},
new CheckboxesItemsItem
{
Value = "menacwy",
Text = "MenACWY",
},
new CheckboxesItemsItem
{
Value = "mmrv",
Text = "MMRV",
},
new CheckboxesItemsItem
{
Value = "rotavirus",
Text = "Rotavirus",
},
new CheckboxesItemsItem
{
Value = "pneumococcal",
Text = "Pneumococcal",
},
new CheckboxesItemsItem
{
Value = "tdipv",
Text = "Td/IPV",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Which vaccines would you like to include?",
Size = "l",
},
})"
IdPrefix="all"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "all",
Text = "All 9 vaccines",
Behaviour = "inclusive",
},
new CheckboxesItemsItem
{
Divider = "or",
Behaviour = "inclusive",
},
new CheckboxesItemsItem
{
Value = "4in1",
Text = "4-in-1 pre-school booster",
},
new CheckboxesItemsItem
{
Value = "6in1",
Text = "6-in-1",
},
new CheckboxesItemsItem
{
Value = "hpv",
Text = "HPV",
},
new CheckboxesItemsItem
{
Value = "menb",
Text = "MenB",
},
new CheckboxesItemsItem
{
Value = "menacwy",
Text = "MenACWY",
},
new CheckboxesItemsItem
{
Value = "mmrv",
Text = "MMRV",
},
new CheckboxesItemsItem
{
Value = "rotavirus",
Text = "Rotavirus",
},
new CheckboxesItemsItem
{
Value = "pneumococcal",
Text = "Pneumococcal",
},
new CheckboxesItemsItem
{
Value = "tdipv",
Text = "Td/IPV",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "Which vaccines would you like to include?",
"size": "l"
}
},
"idPrefix": "all",
"name": "example",
"items": [
{
"value": "all",
"text": "All 9 vaccines",
"behaviour": "inclusive"
},
{
"divider": "or",
"behaviour": "inclusive"
},
{
"value": "4in1",
"text": "4-in-1 pre-school booster"
},
{
"value": "6in1",
"text": "6-in-1"
},
{
"value": "hpv",
"text": "HPV"
},
{
"value": "menb",
"text": "MenB"
},
{
"value": "menacwy",
"text": "MenACWY"
},
{
"value": "mmrv",
"text": "MMRV"
},
{
"value": "rotavirus",
"text": "Rotavirus"
},
{
"value": "pneumococcal",
"text": "Pneumococcal"
},
{
"value": "tdipv",
"text": "Td/IPV"
}
]
}) }}With "all" option
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Which vaccines would you like to include?",
Size = "m",
},
})"
id-prefix="all"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "all",
Text = "All 9 vaccines",
Behaviour = "inclusive",
},
new CheckboxesItemsItem
{
Divider = "or",
Behaviour = "inclusive",
},
new CheckboxesItemsItem
{
Value = "4in1",
Text = "4-in-1 pre-school booster",
},
new CheckboxesItemsItem
{
Value = "6in1",
Text = "6-in-1",
},
new CheckboxesItemsItem
{
Value = "hpv",
Text = "HPV",
},
new CheckboxesItemsItem
{
Value = "menb",
Text = "MenB",
},
new CheckboxesItemsItem
{
Value = "menacwy",
Text = "MenACWY",
},
new CheckboxesItemsItem
{
Value = "mmrv",
Text = "MMRV",
},
new CheckboxesItemsItem
{
Value = "rotavirus",
Text = "Rotavirus",
},
new CheckboxesItemsItem
{
Value = "pneumococcal",
Text = "Pneumococcal",
},
new CheckboxesItemsItem
{
Value = "tdipv",
Text = "Td/IPV",
},
])"
small="true"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Which vaccines would you like to include?",
Size = "m",
},
})"
IdPrefix="all"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "all",
Text = "All 9 vaccines",
Behaviour = "inclusive",
},
new CheckboxesItemsItem
{
Divider = "or",
Behaviour = "inclusive",
},
new CheckboxesItemsItem
{
Value = "4in1",
Text = "4-in-1 pre-school booster",
},
new CheckboxesItemsItem
{
Value = "6in1",
Text = "6-in-1",
},
new CheckboxesItemsItem
{
Value = "hpv",
Text = "HPV",
},
new CheckboxesItemsItem
{
Value = "menb",
Text = "MenB",
},
new CheckboxesItemsItem
{
Value = "menacwy",
Text = "MenACWY",
},
new CheckboxesItemsItem
{
Value = "mmrv",
Text = "MMRV",
},
new CheckboxesItemsItem
{
Value = "rotavirus",
Text = "Rotavirus",
},
new CheckboxesItemsItem
{
Value = "pneumococcal",
Text = "Pneumococcal",
},
new CheckboxesItemsItem
{
Value = "tdipv",
Text = "Td/IPV",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "Which vaccines would you like to include?",
"size": "m"
}
},
"idPrefix": "all",
"name": "example",
"items": [
{
"value": "all",
"text": "All 9 vaccines",
"behaviour": "inclusive"
},
{
"divider": "or",
"behaviour": "inclusive"
},
{
"value": "4in1",
"text": "4-in-1 pre-school booster"
},
{
"value": "6in1",
"text": "6-in-1"
},
{
"value": "hpv",
"text": "HPV"
},
{
"value": "menb",
"text": "MenB"
},
{
"value": "menacwy",
"text": "MenACWY"
},
{
"value": "mmrv",
"text": "MMRV"
},
{
"value": "rotavirus",
"text": "Rotavirus"
},
{
"value": "pneumococcal",
"text": "Pneumococcal"
},
{
"value": "tdipv",
"text": "Td/IPV"
}
],
"small": true
}) }}With "all" option (named group)
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Which vaccines would you like to include?",
Size = "l",
},
})"
id-prefix="all"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "all",
Text = "All 9 vaccines",
Behaviour = "inclusive",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Divider = "or",
Behaviour = "inclusive",
},
new CheckboxesItemsItem
{
Value = "4in1",
Text = "4-in-1 pre-school booster",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Value = "6in1",
Text = "6-in-1",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Value = "hpv",
Text = "HPV",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Value = "menb",
Text = "MenB",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Value = "menacwy",
Text = "MenACWY",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Value = "mmrv",
Text = "MMRV",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Value = "rotavirus",
Text = "Rotavirus",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Value = "pneumococcal",
Text = "Pneumococcal",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Value = "tdipv",
Text = "Td/IPV",
BehaviourGroup = "vaccines-included",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Which vaccines would you like to include?",
Size = "l",
},
})"
IdPrefix="all"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "all",
Text = "All 9 vaccines",
Behaviour = "inclusive",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Divider = "or",
Behaviour = "inclusive",
},
new CheckboxesItemsItem
{
Value = "4in1",
Text = "4-in-1 pre-school booster",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Value = "6in1",
Text = "6-in-1",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Value = "hpv",
Text = "HPV",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Value = "menb",
Text = "MenB",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Value = "menacwy",
Text = "MenACWY",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Value = "mmrv",
Text = "MMRV",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Value = "rotavirus",
Text = "Rotavirus",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Value = "pneumococcal",
Text = "Pneumococcal",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Value = "tdipv",
Text = "Td/IPV",
BehaviourGroup = "vaccines-included",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "Which vaccines would you like to include?",
"size": "l"
}
},
"idPrefix": "all",
"name": "example",
"items": [
{
"value": "all",
"text": "All 9 vaccines",
"behaviour": "inclusive",
"behaviourGroup": "vaccines-included"
},
{
"divider": "or",
"behaviour": "inclusive"
},
{
"value": "4in1",
"text": "4-in-1 pre-school booster",
"behaviourGroup": "vaccines-included"
},
{
"value": "6in1",
"text": "6-in-1",
"behaviourGroup": "vaccines-included"
},
{
"value": "hpv",
"text": "HPV",
"behaviourGroup": "vaccines-included"
},
{
"value": "menb",
"text": "MenB",
"behaviourGroup": "vaccines-included"
},
{
"value": "menacwy",
"text": "MenACWY",
"behaviourGroup": "vaccines-included"
},
{
"value": "mmrv",
"text": "MMRV",
"behaviourGroup": "vaccines-included"
},
{
"value": "rotavirus",
"text": "Rotavirus",
"behaviourGroup": "vaccines-included"
},
{
"value": "pneumococcal",
"text": "Pneumococcal",
"behaviourGroup": "vaccines-included"
},
{
"value": "tdipv",
"text": "Td/IPV",
"behaviourGroup": "vaccines-included"
}
]
}) }}With "all" option (named group, unique)
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Which vaccines would you like to include?",
Size = "l",
},
})"
id-prefix="all"
items="@([
new CheckboxesItemsItem
{
Name = "vaccines-all",
Value = "all",
Text = "All 9 vaccines",
Behaviour = "inclusive",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Divider = "or",
Behaviour = "inclusive",
},
new CheckboxesItemsItem
{
Name = "vaccines-4in1",
Value = "4in1",
Text = "4-in-1 pre-school booster",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Name = "vaccines-6in1",
Value = "6in1",
Text = "6-in-1",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Name = "vaccines-hpv",
Value = "hpv",
Text = "HPV",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Name = "vaccines-menb",
Value = "menb",
Text = "MenB",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Name = "vaccines-menacwy",
Value = "menacwy",
Text = "MenACWY",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Name = "vaccines-mmrv",
Value = "mmrv",
Text = "MMRV",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Name = "vaccines-rotavirus",
Value = "rotavirus",
Text = "Rotavirus",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Name = "vaccines-pneumococcal",
Value = "pneumococcal",
Text = "Pneumococcal",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Name = "vaccines-tdipv",
Value = "tdipv",
Text = "Td/IPV",
BehaviourGroup = "vaccines-included",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Which vaccines would you like to include?",
Size = "l",
},
})"
IdPrefix="all"
Items="@([
new CheckboxesItemsItem
{
Name = "vaccines-all",
Value = "all",
Text = "All 9 vaccines",
Behaviour = "inclusive",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Divider = "or",
Behaviour = "inclusive",
},
new CheckboxesItemsItem
{
Name = "vaccines-4in1",
Value = "4in1",
Text = "4-in-1 pre-school booster",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Name = "vaccines-6in1",
Value = "6in1",
Text = "6-in-1",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Name = "vaccines-hpv",
Value = "hpv",
Text = "HPV",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Name = "vaccines-menb",
Value = "menb",
Text = "MenB",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Name = "vaccines-menacwy",
Value = "menacwy",
Text = "MenACWY",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Name = "vaccines-mmrv",
Value = "mmrv",
Text = "MMRV",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Name = "vaccines-rotavirus",
Value = "rotavirus",
Text = "Rotavirus",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Name = "vaccines-pneumococcal",
Value = "pneumococcal",
Text = "Pneumococcal",
BehaviourGroup = "vaccines-included",
},
new CheckboxesItemsItem
{
Name = "vaccines-tdipv",
Value = "tdipv",
Text = "Td/IPV",
BehaviourGroup = "vaccines-included",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "Which vaccines would you like to include?",
"size": "l"
}
},
"idPrefix": "all",
"items": [
{
"name": "vaccines-all",
"value": "all",
"text": "All 9 vaccines",
"behaviour": "inclusive",
"behaviourGroup": "vaccines-included"
},
{
"divider": "or",
"behaviour": "inclusive"
},
{
"name": "vaccines-4in1",
"value": "4in1",
"text": "4-in-1 pre-school booster",
"behaviourGroup": "vaccines-included"
},
{
"name": "vaccines-6in1",
"value": "6in1",
"text": "6-in-1",
"behaviourGroup": "vaccines-included"
},
{
"name": "vaccines-hpv",
"value": "hpv",
"text": "HPV",
"behaviourGroup": "vaccines-included"
},
{
"name": "vaccines-menb",
"value": "menb",
"text": "MenB",
"behaviourGroup": "vaccines-included"
},
{
"name": "vaccines-menacwy",
"value": "menacwy",
"text": "MenACWY",
"behaviourGroup": "vaccines-included"
},
{
"name": "vaccines-mmrv",
"value": "mmrv",
"text": "MMRV",
"behaviourGroup": "vaccines-included"
},
{
"name": "vaccines-rotavirus",
"value": "rotavirus",
"text": "Rotavirus",
"behaviourGroup": "vaccines-included"
},
{
"name": "vaccines-pneumococcal",
"value": "pneumococcal",
"text": "Pneumococcal",
"behaviourGroup": "vaccines-included"
},
{
"name": "vaccines-tdipv",
"value": "tdipv",
"text": "Td/IPV",
"behaviourGroup": "vaccines-included"
}
]
}) }}With conditional content
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
hint="Select all options that are relevant to you"
id-prefix="conditional"
name="contact"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-email"">
Email address
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-email"" name=""contact-by-email"" type=""text"" spellcheck=""false"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-phone"">
Phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-phone"" name=""contact-by-phone"" type=""tel"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-text"">
Mobile phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-text"" name=""contact-by-text"" type=""tel"">
</div>
",
},
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
IdPrefix="conditional"
Name="contact"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-email"">
Email address
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-email"" name=""contact-by-email"" type=""text"" spellcheck=""false"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-phone"">
Phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-phone"" name=""contact-by-phone"" type=""tel"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-text"">
Mobile phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-text"" name=""contact-by-text"" type=""tel"">
</div>
",
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "conditional",
"name": "contact",
"items": [
{
"value": "email",
"text": "Email",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-email\">\n Email address\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-email\" name=\"contact-by-email\" type=\"text\" spellcheck=\"false\">\n</div>\n"
}
},
{
"value": "phone",
"text": "Phone",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-phone\">\n Phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-phone\" name=\"contact-by-phone\" type=\"tel\">\n</div>\n"
}
},
{
"value": "text",
"text": "Text message",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-text\">\n Mobile phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-text\" name=\"contact-by-text\" type=\"tel\">\n</div>\n"
}
}
]
}) }}With conditional content
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
hint="Select all options that are relevant to you"
id-prefix="conditional"
name="contact"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-email"">
Email address
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-email"" name=""contact-by-email"" type=""text"" spellcheck=""false"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-phone"">
Phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-phone"" name=""contact-by-phone"" type=""tel"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-text"">
Mobile phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-text"" name=""contact-by-text"" type=""tel"">
</div>
",
},
},
])"
small="true"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
IdPrefix="conditional"
Name="contact"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-email"">
Email address
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-email"" name=""contact-by-email"" type=""text"" spellcheck=""false"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-phone"">
Phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-phone"" name=""contact-by-phone"" type=""tel"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-text"">
Mobile phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-text"" name=""contact-by-text"" type=""tel"">
</div>
",
},
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "conditional",
"name": "contact",
"items": [
{
"value": "email",
"text": "Email",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-email\">\n Email address\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-email\" name=\"contact-by-email\" type=\"text\" spellcheck=\"false\">\n</div>\n"
}
},
{
"value": "phone",
"text": "Phone",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-phone\">\n Phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-phone\" name=\"contact-by-phone\" type=\"tel\">\n</div>\n"
}
},
{
"value": "text",
"text": "Text message",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-text\">\n Mobile phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-text\" name=\"contact-by-text\" type=\"tel\">\n</div>\n"
}
}
],
"small": true
}) }}With conditional content, error message
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
hint="Select all options that are relevant to you"
error-message="Select how you like to be contacted"
id-prefix="conditional"
name="contact"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-email"">
Email address
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-email"" name=""contact-by-email"" type=""text"" spellcheck=""false"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-phone"">
Phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-phone"" name=""contact-by-phone"" type=""tel"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-text"">
Mobile phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-text"" name=""contact-by-text"" type=""tel"">
</div>
",
},
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
ErrorMessage="@(new ErrorMessageOptions
{
Text = "Select how you like to be contacted",
})"
IdPrefix="conditional"
Name="contact"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-email"">
Email address
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-email"" name=""contact-by-email"" type=""text"" spellcheck=""false"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-phone"">
Phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-phone"" name=""contact-by-phone"" type=""tel"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-text"">
Mobile phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-text"" name=""contact-by-text"" type=""tel"">
</div>
",
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"errorMessage": {
"text": "Select how you like to be contacted"
},
"idPrefix": "conditional",
"name": "contact",
"items": [
{
"value": "email",
"text": "Email",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-email\">\n Email address\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-email\" name=\"contact-by-email\" type=\"text\" spellcheck=\"false\">\n</div>\n"
}
},
{
"value": "phone",
"text": "Phone",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-phone\">\n Phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-phone\" name=\"contact-by-phone\" type=\"tel\">\n</div>\n"
}
},
{
"value": "text",
"text": "Text message",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-text\">\n Mobile phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-text\" name=\"contact-by-text\" type=\"tel\">\n</div>\n"
}
}
]
}) }}With conditional content, error message
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
hint="Select all options that are relevant to you"
error-message="Select how you like to be contacted"
id-prefix="conditional"
name="contact"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-email"">
Email address
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-email"" name=""contact-by-email"" type=""text"" spellcheck=""false"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-phone"">
Phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-phone"" name=""contact-by-phone"" type=""tel"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-text"">
Mobile phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-text"" name=""contact-by-text"" type=""tel"">
</div>
",
},
},
])"
small="true"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
ErrorMessage="@(new ErrorMessageOptions
{
Text = "Select how you like to be contacted",
})"
IdPrefix="conditional"
Name="contact"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-email"">
Email address
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-email"" name=""contact-by-email"" type=""text"" spellcheck=""false"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-phone"">
Phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-phone"" name=""contact-by-phone"" type=""tel"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-text"">
Mobile phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-text"" name=""contact-by-text"" type=""tel"">
</div>
",
},
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"errorMessage": {
"text": "Select how you like to be contacted"
},
"idPrefix": "conditional",
"name": "contact",
"items": [
{
"value": "email",
"text": "Email",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-email\">\n Email address\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-email\" name=\"contact-by-email\" type=\"text\" spellcheck=\"false\">\n</div>\n"
}
},
{
"value": "phone",
"text": "Phone",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-phone\">\n Phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-phone\" name=\"contact-by-phone\" type=\"tel\">\n</div>\n"
}
},
{
"value": "text",
"text": "Text message",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-text\">\n Mobile phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-text\" name=\"contact-by-text\" type=\"tel\">\n</div>\n"
}
}
],
"small": true
}) }}With conditional content, error message (nested)
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
hint="Select all options that are relevant to you"
id-prefix="conditional"
name="example"
values="@([
"phone",
])"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-email"">
Email address
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-email"" name=""contact-by-email"" type=""text"" spellcheck=""false"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group nhsuk-form-group--error"">
<label class=""nhsuk-label"" for=""contact-by-phone"">
Phone number
</label>
<span class=""nhsuk-error-message"" id=""contact-by-phone-error"">
<span class=""nhsuk-u-visually-hidden"">Error: </span>Enter your phone number
</span>
<input class=""nhsuk-input nhsuk-input--error nhsuk-u-width-two-thirds"" id=""contact-by-phone"" name=""contact-by-phone"" type=""tel"" aria-describedby=""contact-by-phone-error"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-text"">
Mobile phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-text"" name=""contact-by-text"" type=""tel"">
</div>
",
},
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
IdPrefix="conditional"
Name="example"
Values="@([
"phone",
])"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-email"">
Email address
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-email"" name=""contact-by-email"" type=""text"" spellcheck=""false"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group nhsuk-form-group--error"">
<label class=""nhsuk-label"" for=""contact-by-phone"">
Phone number
</label>
<span class=""nhsuk-error-message"" id=""contact-by-phone-error"">
<span class=""nhsuk-u-visually-hidden"">Error: </span>Enter your phone number
</span>
<input class=""nhsuk-input nhsuk-input--error nhsuk-u-width-two-thirds"" id=""contact-by-phone"" name=""contact-by-phone"" type=""tel"" aria-describedby=""contact-by-phone-error"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-text"">
Mobile phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-text"" name=""contact-by-text"" type=""tel"">
</div>
",
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "conditional",
"name": "example",
"values": [
"phone"
],
"items": [
{
"value": "email",
"text": "Email",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-email\">\n Email address\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-email\" name=\"contact-by-email\" type=\"text\" spellcheck=\"false\">\n</div>\n"
}
},
{
"value": "phone",
"text": "Phone",
"conditional": {
"html": "<div class=\"nhsuk-form-group nhsuk-form-group--error\">\n <label class=\"nhsuk-label\" for=\"contact-by-phone\">\n Phone number\n </label>\n <span class=\"nhsuk-error-message\" id=\"contact-by-phone-error\">\n <span class=\"nhsuk-u-visually-hidden\">Error: </span>Enter your phone number\n </span>\n <input class=\"nhsuk-input nhsuk-input--error nhsuk-u-width-two-thirds\" id=\"contact-by-phone\" name=\"contact-by-phone\" type=\"tel\" aria-describedby=\"contact-by-phone-error\">\n</div>\n"
}
},
{
"value": "text",
"text": "Text message",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-text\">\n Mobile phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-text\" name=\"contact-by-text\" type=\"tel\">\n</div>\n"
}
}
]
}) }}With conditional content, error message (nested)
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
hint="Select all options that are relevant to you"
id-prefix="conditional"
name="example"
values="@([
"phone",
])"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-email"">
Email address
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-email"" name=""contact-by-email"" type=""text"" spellcheck=""false"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group nhsuk-form-group--error"">
<label class=""nhsuk-label"" for=""contact-by-phone"">
Phone number
</label>
<span class=""nhsuk-error-message"" id=""contact-by-phone-error"">
<span class=""nhsuk-u-visually-hidden"">Error: </span>Enter your phone number
</span>
<input class=""nhsuk-input nhsuk-input--error nhsuk-u-width-two-thirds"" id=""contact-by-phone"" name=""contact-by-phone"" type=""tel"" aria-describedby=""contact-by-phone-error"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-text"">
Mobile phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-text"" name=""contact-by-text"" type=""tel"">
</div>
",
},
},
])"
small="true"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
IdPrefix="conditional"
Name="example"
Values="@([
"phone",
])"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-email"">
Email address
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-email"" name=""contact-by-email"" type=""text"" spellcheck=""false"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group nhsuk-form-group--error"">
<label class=""nhsuk-label"" for=""contact-by-phone"">
Phone number
</label>
<span class=""nhsuk-error-message"" id=""contact-by-phone-error"">
<span class=""nhsuk-u-visually-hidden"">Error: </span>Enter your phone number
</span>
<input class=""nhsuk-input nhsuk-input--error nhsuk-u-width-two-thirds"" id=""contact-by-phone"" name=""contact-by-phone"" type=""tel"" aria-describedby=""contact-by-phone-error"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-text"">
Mobile phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-text"" name=""contact-by-text"" type=""tel"">
</div>
",
},
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "conditional",
"name": "example",
"values": [
"phone"
],
"items": [
{
"value": "email",
"text": "Email",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-email\">\n Email address\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-email\" name=\"contact-by-email\" type=\"text\" spellcheck=\"false\">\n</div>\n"
}
},
{
"value": "phone",
"text": "Phone",
"conditional": {
"html": "<div class=\"nhsuk-form-group nhsuk-form-group--error\">\n <label class=\"nhsuk-label\" for=\"contact-by-phone\">\n Phone number\n </label>\n <span class=\"nhsuk-error-message\" id=\"contact-by-phone-error\">\n <span class=\"nhsuk-u-visually-hidden\">Error: </span>Enter your phone number\n </span>\n <input class=\"nhsuk-input nhsuk-input--error nhsuk-u-width-two-thirds\" id=\"contact-by-phone\" name=\"contact-by-phone\" type=\"tel\" aria-describedby=\"contact-by-phone-error\">\n</div>\n"
}
},
{
"value": "text",
"text": "Text message",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-text\">\n Mobile phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-text\" name=\"contact-by-text\" type=\"tel\">\n</div>\n"
}
}
],
"small": true
}) }}With conditional content, special characters
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
hint="Select all options that are relevant to you"
id-prefix="user.profile[contact-prefs]"
name="contact"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-email"">
Email address
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-email"" name=""contact-by-email"" type=""text"" spellcheck=""false"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-phone"">
Phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-phone"" name=""contact-by-phone"" type=""tel"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-text"">
Mobile phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-text"" name=""contact-by-text"" type=""tel"">
</div>
",
},
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
IdPrefix="user.profile[contact-prefs]"
Name="contact"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-email"">
Email address
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-email"" name=""contact-by-email"" type=""text"" spellcheck=""false"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-phone"">
Phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-phone"" name=""contact-by-phone"" type=""tel"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-text"">
Mobile phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-text"" name=""contact-by-text"" type=""tel"">
</div>
",
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "user.profile[contact-prefs]",
"name": "contact",
"items": [
{
"value": "email",
"text": "Email",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-email\">\n Email address\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-email\" name=\"contact-by-email\" type=\"text\" spellcheck=\"false\">\n</div>\n"
}
},
{
"value": "phone",
"text": "Phone",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-phone\">\n Phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-phone\" name=\"contact-by-phone\" type=\"tel\">\n</div>\n"
}
},
{
"value": "text",
"text": "Text message",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-text\">\n Mobile phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-text\" name=\"contact-by-text\" type=\"tel\">\n</div>\n"
}
}
]
}) }}With conditional content, special characters
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
hint="Select all options that are relevant to you"
id-prefix="user.profile[contact-prefs]"
name="contact"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-email"">
Email address
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-email"" name=""contact-by-email"" type=""text"" spellcheck=""false"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-phone"">
Phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-phone"" name=""contact-by-phone"" type=""tel"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-text"">
Mobile phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-text"" name=""contact-by-text"" type=""tel"">
</div>
",
},
},
])"
small="true"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
IdPrefix="user.profile[contact-prefs]"
Name="contact"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-email"">
Email address
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-email"" name=""contact-by-email"" type=""text"" spellcheck=""false"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-phone"">
Phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-phone"" name=""contact-by-phone"" type=""tel"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-text"">
Mobile phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-text"" name=""contact-by-text"" type=""tel"">
</div>
",
},
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "user.profile[contact-prefs]",
"name": "contact",
"items": [
{
"value": "email",
"text": "Email",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-email\">\n Email address\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-email\" name=\"contact-by-email\" type=\"text\" spellcheck=\"false\">\n</div>\n"
}
},
{
"value": "phone",
"text": "Phone",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-phone\">\n Phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-phone\" name=\"contact-by-phone\" type=\"tel\">\n</div>\n"
}
},
{
"value": "text",
"text": "Text message",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-text\">\n Mobile phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-text\" name=\"contact-by-text\" type=\"tel\">\n</div>\n"
}
}
],
"small": true
}) }}With error message
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
error-message="Select how you want to be contacted"
id-prefix="with-error-message"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
ErrorMessage="@(new ErrorMessageOptions
{
Text = "Select how you want to be contacted",
})"
IdPrefix="with-error-message"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"errorMessage": {
"text": "Select how you want to be contacted"
},
"idPrefix": "with-error-message",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
]
}) }}With error message
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
error-message="Select how you want to be contacted"
id-prefix="with-error-message"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
small="true"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
ErrorMessage="@(new ErrorMessageOptions
{
Text = "Select how you want to be contacted",
})"
IdPrefix="with-error-message"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"errorMessage": {
"text": "Select how you want to be contacted"
},
"idPrefix": "with-error-message",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
],
"small": true
}) }}With error message and hint
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
hint="Select all options that are relevant to you"
error-message="Select how you want to be contacted"
id-prefix="with-hint-error"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
ErrorMessage="@(new ErrorMessageOptions
{
Text = "Select how you want to be contacted",
})"
IdPrefix="with-hint-error"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"errorMessage": {
"text": "Select how you want to be contacted"
},
"idPrefix": "with-hint-error",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
]
}) }}With error message and hint
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
hint="Select all options that are relevant to you"
error-message="Select how you want to be contacted"
id-prefix="with-hint-error"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
small="true"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
ErrorMessage="@(new ErrorMessageOptions
{
Text = "Select how you want to be contacted",
})"
IdPrefix="with-hint-error"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"errorMessage": {
"text": "Select how you want to be contacted"
},
"idPrefix": "with-hint-error",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
],
"small": true
}) }}With error message and hint as strings
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
hint="Select all options that are relevant to you"
error-message="Select how you want to be contacted"
id-prefix="with-hint-error"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
Hint="@("Select all options that are relevant to you")"
ErrorMessage="@("Select how you want to be contacted")"
IdPrefix="with-hint-error"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"hint": "Select all options that are relevant to you",
"errorMessage": "Select how you want to be contacted",
"idPrefix": "with-hint-error",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
]
}) }}With error message and hint as strings
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
hint="Select all options that are relevant to you"
error-message="Select how you want to be contacted"
id-prefix="with-hint-error"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
small="true"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
Hint="@("Select all options that are relevant to you")"
ErrorMessage="@("Select how you want to be contacted")"
IdPrefix="with-hint-error"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"hint": "Select all options that are relevant to you",
"errorMessage": "Select how you want to be contacted",
"idPrefix": "with-hint-error",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
],
"small": true
}) }}With error message and hint, without heading
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = null,
},
})"
hint="Select all options that are relevant to you"
error-message="Select how you want to be contacted"
id-prefix="with-hint-error"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = null,
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
ErrorMessage="@(new ErrorMessageOptions
{
Text = "Select how you want to be contacted",
})"
IdPrefix="with-hint-error"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": null
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"errorMessage": {
"text": "Select how you want to be contacted"
},
"idPrefix": "with-hint-error",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
]
}) }}With error message and hint, without heading
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = null,
},
})"
hint="Select all options that are relevant to you"
error-message="Select how you want to be contacted"
id-prefix="with-hint-error"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
small="true"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = null,
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
ErrorMessage="@(new ErrorMessageOptions
{
Text = "Select how you want to be contacted",
})"
IdPrefix="with-hint-error"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": null
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"errorMessage": {
"text": "Select how you want to be contacted"
},
"idPrefix": "with-hint-error",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
],
"small": true
}) }}With error message, without heading
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = null,
},
})"
error-message="Select how you want to be contacted"
id-prefix="with-error-message"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = null,
},
})"
ErrorMessage="@(new ErrorMessageOptions
{
Text = "Select how you want to be contacted",
})"
IdPrefix="with-error-message"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": null
}
},
"errorMessage": {
"text": "Select how you want to be contacted"
},
"idPrefix": "with-error-message",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
]
}) }}With error message, without heading
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = null,
},
})"
error-message="Select how you want to be contacted"
id-prefix="with-error-message"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
small="true"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = null,
},
})"
ErrorMessage="@(new ErrorMessageOptions
{
Text = "Select how you want to be contacted",
})"
IdPrefix="with-error-message"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": null
}
},
"errorMessage": {
"text": "Select how you want to be contacted"
},
"idPrefix": "with-error-message",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
],
"small": true
}) }}With error only
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
error-message-options="@(true)"
id-prefix="with-error-only"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
ErrorMessage="@(true)"
IdPrefix="with-error-only"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"errorMessage": true,
"idPrefix": "with-error-only",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
]
}) }}With hint
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "What medical conditions do you have?",
Size = "l",
},
})"
hint="Select 1 or more"
id-prefix="with-hint"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "alzheimers",
Text = "Alzheimer's disease or dementia",
},
new CheckboxesItemsItem
{
Value = "asthma",
Text = "Asthma",
},
new CheckboxesItemsItem
{
Value = "cancer",
Text = "Cancer",
},
new CheckboxesItemsItem
{
Value = "diabetes",
Text = "Diabetes",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "What medical conditions do you have?",
Size = "l",
},
})"
Hint="@(new HintOptions
{
Text = "Select 1 or more",
})"
IdPrefix="with-hint"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "alzheimers",
Text = "Alzheimer's disease or dementia",
},
new CheckboxesItemsItem
{
Value = "asthma",
Text = "Asthma",
},
new CheckboxesItemsItem
{
Value = "cancer",
Text = "Cancer",
},
new CheckboxesItemsItem
{
Value = "diabetes",
Text = "Diabetes",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "What medical conditions do you have?",
"size": "l"
}
},
"hint": {
"text": "Select 1 or more"
},
"idPrefix": "with-hint",
"name": "example",
"items": [
{
"value": "alzheimers",
"text": "Alzheimer's disease or dementia"
},
{
"value": "asthma",
"text": "Asthma"
},
{
"value": "cancer",
"text": "Cancer"
},
{
"value": "diabetes",
"text": "Diabetes"
}
]
}) }}With hint
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "What medical conditions do you have?",
Size = "m",
},
})"
hint="Select 1 or more"
id-prefix="with-hint"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "alzheimers",
Text = "Alzheimer's disease or dementia",
},
new CheckboxesItemsItem
{
Value = "asthma",
Text = "Asthma",
},
new CheckboxesItemsItem
{
Value = "cancer",
Text = "Cancer",
},
new CheckboxesItemsItem
{
Value = "diabetes",
Text = "Diabetes",
},
])"
small="true"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "What medical conditions do you have?",
Size = "m",
},
})"
Hint="@(new HintOptions
{
Text = "Select 1 or more",
})"
IdPrefix="with-hint"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "alzheimers",
Text = "Alzheimer's disease or dementia",
},
new CheckboxesItemsItem
{
Value = "asthma",
Text = "Asthma",
},
new CheckboxesItemsItem
{
Value = "cancer",
Text = "Cancer",
},
new CheckboxesItemsItem
{
Value = "diabetes",
Text = "Diabetes",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "What medical conditions do you have?",
"size": "m"
}
},
"hint": {
"text": "Select 1 or more"
},
"idPrefix": "with-hint",
"name": "example",
"items": [
{
"value": "alzheimers",
"text": "Alzheimer's disease or dementia"
},
{
"value": "asthma",
"text": "Asthma"
},
{
"value": "cancer",
"text": "Cancer"
},
{
"value": "diabetes",
"text": "Diabetes"
}
],
"small": true
}) }}With hints on items
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "What medical conditions do you have?",
Size = "l",
},
})"
hint="Select 1 or more"
id-prefix="with-hint-item"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "alzheimers",
Text = "Alzheimer's disease or dementia",
},
new CheckboxesItemsItem
{
Value = "asthma",
Text = "Asthma",
},
new CheckboxesItemsItem
{
Value = "cancer",
Text = "Cancer",
},
new CheckboxesItemsItem
{
Value = "diabetes",
Text = "Diabetes",
Hint = new HintOptions
{
Text = "including type 1, type 2, and gestational diabetes",
},
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "What medical conditions do you have?",
Size = "l",
},
})"
Hint="@(new HintOptions
{
Text = "Select 1 or more",
})"
IdPrefix="with-hint-item"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "alzheimers",
Text = "Alzheimer's disease or dementia",
},
new CheckboxesItemsItem
{
Value = "asthma",
Text = "Asthma",
},
new CheckboxesItemsItem
{
Value = "cancer",
Text = "Cancer",
},
new CheckboxesItemsItem
{
Value = "diabetes",
Text = "Diabetes",
Hint = new HintOptions
{
Text = "including type 1, type 2, and gestational diabetes",
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "What medical conditions do you have?",
"size": "l"
}
},
"hint": {
"text": "Select 1 or more"
},
"idPrefix": "with-hint-item",
"name": "example",
"items": [
{
"value": "alzheimers",
"text": "Alzheimer's disease or dementia"
},
{
"value": "asthma",
"text": "Asthma"
},
{
"value": "cancer",
"text": "Cancer"
},
{
"value": "diabetes",
"text": "Diabetes",
"hint": {
"text": "including type 1, type 2, and gestational diabetes"
}
}
]
}) }}With hints on items
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "What medical conditions do you have?",
Size = "m",
},
})"
hint="Select 1 or more"
id-prefix="with-hint-item"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "alzheimers",
Text = "Alzheimer's disease or dementia",
},
new CheckboxesItemsItem
{
Value = "asthma",
Text = "Asthma",
},
new CheckboxesItemsItem
{
Value = "cancer",
Text = "Cancer",
},
new CheckboxesItemsItem
{
Value = "diabetes",
Text = "Diabetes",
Hint = new HintOptions
{
Text = "including type 1, type 2, and gestational diabetes",
},
},
])"
small="true"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "What medical conditions do you have?",
Size = "m",
},
})"
Hint="@(new HintOptions
{
Text = "Select 1 or more",
})"
IdPrefix="with-hint-item"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "alzheimers",
Text = "Alzheimer's disease or dementia",
},
new CheckboxesItemsItem
{
Value = "asthma",
Text = "Asthma",
},
new CheckboxesItemsItem
{
Value = "cancer",
Text = "Cancer",
},
new CheckboxesItemsItem
{
Value = "diabetes",
Text = "Diabetes",
Hint = new HintOptions
{
Text = "including type 1, type 2, and gestational diabetes",
},
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "What medical conditions do you have?",
"size": "m"
}
},
"hint": {
"text": "Select 1 or more"
},
"idPrefix": "with-hint-item",
"name": "example",
"items": [
{
"value": "alzheimers",
"text": "Alzheimer's disease or dementia"
},
{
"value": "asthma",
"text": "Asthma"
},
{
"value": "cancer",
"text": "Cancer"
},
{
"value": "diabetes",
"text": "Diabetes",
"hint": {
"text": "including type 1, type 2, and gestational diabetes"
}
}
],
"small": true
}) }}With long text
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Venenatis Condimentum",
Size = "l",
},
})"
id-prefix="with-long-text"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "nullam",
Text = @"Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo
quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida
at eget metus.",
},
new CheckboxesItemsItem
{
Value = "aenean",
Text = @"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus,
nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam
venenatis vestibulum. Cras mattis consectetur purus sit amet
fermentum.",
},
new CheckboxesItemsItem
{
Value = "fusce",
Text = @"Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
nibh, ut fermentum massa justo sit amet risus. Etiam porta sem
malesuada magna mollis euismod. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Etiam porta sem malesuada magna
mollis euismod. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui. Sed posuere consectetur est at lobortis.",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Venenatis Condimentum",
Size = "l",
},
})"
IdPrefix="with-long-text"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "nullam",
Text = @"Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo
quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida
at eget metus.",
},
new CheckboxesItemsItem
{
Value = "aenean",
Text = @"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus,
nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam
venenatis vestibulum. Cras mattis consectetur purus sit amet
fermentum.",
},
new CheckboxesItemsItem
{
Value = "fusce",
Text = @"Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
nibh, ut fermentum massa justo sit amet risus. Etiam porta sem
malesuada magna mollis euismod. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Etiam porta sem malesuada magna
mollis euismod. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui. Sed posuere consectetur est at lobortis.",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "Venenatis Condimentum",
"size": "l"
}
},
"idPrefix": "with-long-text",
"name": "example",
"items": [
{
"value": "nullam",
"text": "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo\nquam. Pellentesque ornare sem lacinia quam venenatis vestibulum.\nMaecenas faucibus mollis interdum. Donec id elit non mi porta gravida\nat eget metus."
},
{
"value": "aenean",
"text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis\nvestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus,\nnisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis\nnatoque penatibus et magnis dis parturient montes, nascetur ridiculus\nmus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam\nvenenatis vestibulum. Cras mattis consectetur purus sit amet\nfermentum."
},
{
"value": "fusce",
"text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum\nnibh, ut fermentum massa justo sit amet risus. Etiam porta sem\nmalesuada magna mollis euismod. Praesent commodo cursus magna, vel\nscelerisque nisl consectetur et. Etiam porta sem malesuada magna\nmollis euismod. Etiam porta sem malesuada magna mollis euismod.\nDonec sed odio dui. Sed posuere consectetur est at lobortis."
}
]
}) }}With long text
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Venenatis Condimentum",
Size = "m",
},
})"
id-prefix="with-long-text"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "nullam",
Text = @"Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo
quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida
at eget metus.",
},
new CheckboxesItemsItem
{
Value = "aenean",
Text = @"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus,
nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam
venenatis vestibulum. Cras mattis consectetur purus sit amet
fermentum.",
},
new CheckboxesItemsItem
{
Value = "fusce",
Text = @"Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
nibh, ut fermentum massa justo sit amet risus. Etiam porta sem
malesuada magna mollis euismod. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Etiam porta sem malesuada magna
mollis euismod. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui. Sed posuere consectetur est at lobortis.",
},
])"
small="true"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Venenatis Condimentum",
Size = "m",
},
})"
IdPrefix="with-long-text"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "nullam",
Text = @"Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo
quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida
at eget metus.",
},
new CheckboxesItemsItem
{
Value = "aenean",
Text = @"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus,
nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam
venenatis vestibulum. Cras mattis consectetur purus sit amet
fermentum.",
},
new CheckboxesItemsItem
{
Value = "fusce",
Text = @"Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
nibh, ut fermentum massa justo sit amet risus. Etiam porta sem
malesuada magna mollis euismod. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Etiam porta sem malesuada magna
mollis euismod. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui. Sed posuere consectetur est at lobortis.",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "Venenatis Condimentum",
"size": "m"
}
},
"idPrefix": "with-long-text",
"name": "example",
"items": [
{
"value": "nullam",
"text": "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo\nquam. Pellentesque ornare sem lacinia quam venenatis vestibulum.\nMaecenas faucibus mollis interdum. Donec id elit non mi porta gravida\nat eget metus."
},
{
"value": "aenean",
"text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis\nvestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus,\nnisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis\nnatoque penatibus et magnis dis parturient montes, nascetur ridiculus\nmus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam\nvenenatis vestibulum. Cras mattis consectetur purus sit amet\nfermentum."
},
{
"value": "fusce",
"text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum\nnibh, ut fermentum massa justo sit amet risus. Etiam porta sem\nmalesuada magna mollis euismod. Praesent commodo cursus magna, vel\nscelerisque nisl consectetur et. Etiam porta sem malesuada magna\nmollis euismod. Etiam porta sem malesuada magna mollis euismod.\nDonec sed odio dui. Sed posuere consectetur est at lobortis."
}
],
"small": true
}) }}With "none" option
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
id-prefix="none"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
},
new CheckboxesItemsItem
{
Divider = "or",
},
new CheckboxesItemsItem
{
Value = "none",
Text = "I do not want to be contacted",
Behaviour = "exclusive",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
IdPrefix="none"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
},
new CheckboxesItemsItem
{
Divider = "or",
},
new CheckboxesItemsItem
{
Value = "none",
Text = "I do not want to be contacted",
Behaviour = "exclusive",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"idPrefix": "none",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message"
},
{
"divider": "or"
},
{
"value": "none",
"text": "I do not want to be contacted",
"behaviour": "exclusive"
}
]
}) }}With "none" option
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
id-prefix="none"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
},
new CheckboxesItemsItem
{
Divider = "or",
},
new CheckboxesItemsItem
{
Value = "none",
Text = "I do not want to be contacted",
Behaviour = "exclusive",
},
])"
small="true"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
IdPrefix="none"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
},
new CheckboxesItemsItem
{
Divider = "or",
},
new CheckboxesItemsItem
{
Value = "none",
Text = "I do not want to be contacted",
Behaviour = "exclusive",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"idPrefix": "none",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message"
},
{
"divider": "or"
},
{
"value": "none",
"text": "I do not want to be contacted",
"behaviour": "exclusive"
}
],
"small": true
}) }}With "none" option, conditional content
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
id-prefix="none"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-email"">
Email address
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-email"" name=""contact-by-email"" type=""text"" spellcheck=""false"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-phone"">
Phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-phone"" name=""contact-by-phone"" type=""tel"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-text"">
Mobile phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-text"" name=""contact-by-text"" type=""tel"">
</div>
",
},
},
new CheckboxesItemsItem
{
Divider = "or",
},
new CheckboxesItemsItem
{
Value = "none",
Text = "I do not want to be contacted",
Behaviour = "exclusive",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
IdPrefix="none"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-email"">
Email address
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-email"" name=""contact-by-email"" type=""text"" spellcheck=""false"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-phone"">
Phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-phone"" name=""contact-by-phone"" type=""tel"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-text"">
Mobile phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-text"" name=""contact-by-text"" type=""tel"">
</div>
",
},
},
new CheckboxesItemsItem
{
Divider = "or",
},
new CheckboxesItemsItem
{
Value = "none",
Text = "I do not want to be contacted",
Behaviour = "exclusive",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"idPrefix": "none",
"name": "example",
"items": [
{
"value": "email",
"text": "Email",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-email\">\n Email address\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-email\" name=\"contact-by-email\" type=\"text\" spellcheck=\"false\">\n</div>\n"
}
},
{
"value": "phone",
"text": "Phone",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-phone\">\n Phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-phone\" name=\"contact-by-phone\" type=\"tel\">\n</div>\n"
}
},
{
"value": "text",
"text": "Text message",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-text\">\n Mobile phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-text\" name=\"contact-by-text\" type=\"tel\">\n</div>\n"
}
},
{
"divider": "or"
},
{
"value": "none",
"text": "I do not want to be contacted",
"behaviour": "exclusive"
}
]
}) }}With "none" option, conditional content
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
id-prefix="none"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-email"">
Email address
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-email"" name=""contact-by-email"" type=""text"" spellcheck=""false"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-phone"">
Phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-phone"" name=""contact-by-phone"" type=""tel"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-text"">
Mobile phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-text"" name=""contact-by-text"" type=""tel"">
</div>
",
},
},
new CheckboxesItemsItem
{
Divider = "or",
},
new CheckboxesItemsItem
{
Value = "none",
Text = "I do not want to be contacted",
Behaviour = "exclusive",
},
])"
small="true"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
IdPrefix="none"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-email"">
Email address
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-email"" name=""contact-by-email"" type=""text"" spellcheck=""false"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-phone"">
Phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-phone"" name=""contact-by-phone"" type=""tel"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-text"">
Mobile phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-text"" name=""contact-by-text"" type=""tel"">
</div>
",
},
},
new CheckboxesItemsItem
{
Divider = "or",
},
new CheckboxesItemsItem
{
Value = "none",
Text = "I do not want to be contacted",
Behaviour = "exclusive",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"idPrefix": "none",
"name": "example",
"items": [
{
"value": "email",
"text": "Email",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-email\">\n Email address\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-email\" name=\"contact-by-email\" type=\"text\" spellcheck=\"false\">\n</div>\n"
}
},
{
"value": "phone",
"text": "Phone",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-phone\">\n Phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-phone\" name=\"contact-by-phone\" type=\"tel\">\n</div>\n"
}
},
{
"value": "text",
"text": "Text message",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-text\">\n Mobile phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-text\" name=\"contact-by-text\" type=\"tel\">\n</div>\n"
}
},
{
"divider": "or"
},
{
"value": "none",
"text": "I do not want to be contacted",
"behaviour": "exclusive"
}
],
"small": true
}) }}With "none" option, deprecated
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
id-prefix="none"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
},
new CheckboxesItemsItem
{
Divider = "or",
},
new CheckboxesItemsItem
{
Value = "none",
Text = "I do not want to be contacted",
Exclusive = true,
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
IdPrefix="none"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
},
new CheckboxesItemsItem
{
Divider = "or",
},
new CheckboxesItemsItem
{
Value = "none",
Text = "I do not want to be contacted",
Exclusive = true,
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"idPrefix": "none",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message"
},
{
"divider": "or"
},
{
"value": "none",
"text": "I do not want to be contacted",
"exclusive": true
}
]
}) }}With "none" option (named group)
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
id-prefix="none"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
ExclusiveGroup = "communication-preferences",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
ExclusiveGroup = "communication-preferences",
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
ExclusiveGroup = "communication-preferences",
},
new CheckboxesItemsItem
{
Divider = "or",
},
new CheckboxesItemsItem
{
Value = "none",
Text = "I do not want to be contacted",
Behaviour = "exclusive",
ExclusiveGroup = "communication-preferences",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
IdPrefix="none"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
ExclusiveGroup = "communication-preferences",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
ExclusiveGroup = "communication-preferences",
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
ExclusiveGroup = "communication-preferences",
},
new CheckboxesItemsItem
{
Divider = "or",
},
new CheckboxesItemsItem
{
Value = "none",
Text = "I do not want to be contacted",
Behaviour = "exclusive",
ExclusiveGroup = "communication-preferences",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"idPrefix": "none",
"name": "example",
"items": [
{
"value": "email",
"text": "Email",
"exclusiveGroup": "communication-preferences"
},
{
"value": "phone",
"text": "Phone",
"exclusiveGroup": "communication-preferences"
},
{
"value": "text",
"text": "Text message",
"exclusiveGroup": "communication-preferences"
},
{
"divider": "or"
},
{
"value": "none",
"text": "I do not want to be contacted",
"behaviour": "exclusive",
"exclusiveGroup": "communication-preferences"
}
]
}) }}With "none" option (named group, unique)
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
id-prefix="none"
name="example"
items="@([
new CheckboxesItemsItem
{
Name = "preference-email",
Value = "yes",
Text = "Email",
ExclusiveGroup = "communication-preferences",
},
new CheckboxesItemsItem
{
Name = "preference-phone",
Value = "yes",
Text = "Phone",
ExclusiveGroup = "communication-preferences",
},
new CheckboxesItemsItem
{
Name = "preference-text",
Value = "yes",
Text = "Text message",
ExclusiveGroup = "communication-preferences",
},
new CheckboxesItemsItem
{
Divider = "or",
},
new CheckboxesItemsItem
{
Name = "preference-none",
Value = "yes",
Text = "I do not want to be contacted",
Behaviour = "exclusive",
ExclusiveGroup = "communication-preferences",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
IdPrefix="none"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Name = "preference-email",
Value = "yes",
Text = "Email",
ExclusiveGroup = "communication-preferences",
},
new CheckboxesItemsItem
{
Name = "preference-phone",
Value = "yes",
Text = "Phone",
ExclusiveGroup = "communication-preferences",
},
new CheckboxesItemsItem
{
Name = "preference-text",
Value = "yes",
Text = "Text message",
ExclusiveGroup = "communication-preferences",
},
new CheckboxesItemsItem
{
Divider = "or",
},
new CheckboxesItemsItem
{
Name = "preference-none",
Value = "yes",
Text = "I do not want to be contacted",
Behaviour = "exclusive",
ExclusiveGroup = "communication-preferences",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"idPrefix": "none",
"name": "example",
"items": [
{
"name": "preference-email",
"value": "yes",
"text": "Email",
"exclusiveGroup": "communication-preferences"
},
{
"name": "preference-phone",
"value": "yes",
"text": "Phone",
"exclusiveGroup": "communication-preferences"
},
{
"name": "preference-text",
"value": "yes",
"text": "Text message",
"exclusiveGroup": "communication-preferences"
},
{
"divider": "or"
},
{
"name": "preference-none",
"value": "yes",
"text": "I do not want to be contacted",
"behaviour": "exclusive",
"exclusiveGroup": "communication-preferences"
}
]
}) }}Without fieldset
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(null)"
id-prefix="without-fieldset"
name="colours"
items="@([
new CheckboxesItemsItem
{
Value = "red",
Text = "Red",
},
new CheckboxesItemsItem
{
Value = "green",
Text = "Green",
},
new CheckboxesItemsItem
{
Value = "blue",
Text = "Blue",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(null)"
IdPrefix="without-fieldset"
Name="colours"
Items="@([
new CheckboxesItemsItem
{
Value = "red",
Text = "Red",
},
new CheckboxesItemsItem
{
Value = "green",
Text = "Green",
},
new CheckboxesItemsItem
{
Value = "blue",
Text = "Blue",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": null,
"idPrefix": "without-fieldset",
"name": "colours",
"items": [
{
"value": "red",
"text": "Red"
},
{
"value": "green",
"text": "Green"
},
{
"value": "blue",
"text": "Blue"
}
]
}) }}Without fieldset
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(null)"
id-prefix="without-fieldset"
name="colours"
items="@([
new CheckboxesItemsItem
{
Value = "red",
Text = "Red",
},
new CheckboxesItemsItem
{
Value = "green",
Text = "Green",
},
new CheckboxesItemsItem
{
Value = "blue",
Text = "Blue",
},
])"
small="true"
/>Blazor
<NhsukCheckboxes
Fieldset="@(null)"
IdPrefix="without-fieldset"
Name="colours"
Items="@([
new CheckboxesItemsItem
{
Value = "red",
Text = "Red",
},
new CheckboxesItemsItem
{
Value = "green",
Text = "Green",
},
new CheckboxesItemsItem
{
Value = "blue",
Text = "Blue",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": null,
"idPrefix": "without-fieldset",
"name": "colours",
"items": [
{
"value": "red",
"text": "Red"
},
{
"value": "green",
"text": "Green"
},
{
"value": "blue",
"text": "Blue"
}
],
"small": true
}) }}Without heading
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = "How do you want to be contacted about this?",
})"
id-prefix="without-heading"
name="example"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = "How do you want to be contacted about this?",
})"
IdPrefix="without-heading"
Name="example"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
},
new CheckboxesItemsItem
{
Value = "text message",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": "How do you want to be contacted about this?"
},
"idPrefix": "without-heading",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text message",
"text": "Text message"
}
]
}) }}With pre-checked values
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
hint="Select all options that are relevant to you"
id-prefix="conditional"
name="contact"
values="@([
"email",
"text",
])"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-email"">
Email address
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-email"" name=""contact-by-email"" type=""text"" spellcheck=""false"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-phone"">
Phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-phone"" name=""contact-by-phone"" type=""tel"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-text"">
Mobile phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-text"" name=""contact-by-text"" type=""tel"">
</div>
",
},
},
])"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
IdPrefix="conditional"
Name="contact"
Values="@([
"email",
"text",
])"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-email"">
Email address
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-email"" name=""contact-by-email"" type=""text"" spellcheck=""false"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-phone"">
Phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-phone"" name=""contact-by-phone"" type=""tel"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-text"">
Mobile phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-text"" name=""contact-by-text"" type=""tel"">
</div>
",
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "conditional",
"name": "contact",
"values": [
"email",
"text"
],
"items": [
{
"value": "email",
"text": "Email",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-email\">\n Email address\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-email\" name=\"contact-by-email\" type=\"text\" spellcheck=\"false\">\n</div>\n"
}
},
{
"value": "phone",
"text": "Phone",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-phone\">\n Phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-phone\" name=\"contact-by-phone\" type=\"tel\">\n</div>\n"
}
},
{
"value": "text",
"text": "Text message",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-text\">\n Mobile phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-text\" name=\"contact-by-text\" type=\"tel\">\n</div>\n"
}
}
]
}) }}With pre-checked values
Razor Pages and MVC
<nhsuk-checkboxes
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
hint="Select all options that are relevant to you"
id-prefix="conditional"
name="contact"
values="@([
"email",
"text",
])"
items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-email"">
Email address
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-email"" name=""contact-by-email"" type=""text"" spellcheck=""false"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-phone"">
Phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-phone"" name=""contact-by-phone"" type=""tel"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-text"">
Mobile phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-text"" name=""contact-by-text"" type=""tel"">
</div>
",
},
},
])"
small="true"
/>Blazor
<NhsukCheckboxes
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
Hint="@(new HintOptions
{
Text = "Select all options that are relevant to you",
})"
IdPrefix="conditional"
Name="contact"
Values="@([
"email",
"text",
])"
Items="@([
new CheckboxesItemsItem
{
Value = "email",
Text = "Email",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-email"">
Email address
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-email"" name=""contact-by-email"" type=""text"" spellcheck=""false"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-phone"">
Phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-phone"" name=""contact-by-phone"" type=""tel"">
</div>
",
},
},
new CheckboxesItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new CheckboxesItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<label class=""nhsuk-label"" for=""contact-by-text"">
Mobile phone number
</label>
<input class=""nhsuk-input nhsuk-u-width-two-thirds"" id=""contact-by-text"" name=""contact-by-text"" type=""tel"">
</div>
",
},
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/checkboxes/macro.njk" import checkboxes %}
{{ checkboxes({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"hint": {
"text": "Select all options that are relevant to you"
},
"idPrefix": "conditional",
"name": "contact",
"values": [
"email",
"text"
],
"items": [
{
"value": "email",
"text": "Email",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-email\">\n Email address\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-email\" name=\"contact-by-email\" type=\"text\" spellcheck=\"false\">\n</div>\n"
}
},
{
"value": "phone",
"text": "Phone",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-phone\">\n Phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-phone\" name=\"contact-by-phone\" type=\"tel\">\n</div>\n"
}
},
{
"value": "text",
"text": "Text message",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"contact-by-text\">\n Mobile phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"contact-by-text\" name=\"contact-by-text\" type=\"tel\">\n</div>\n"
}
}
],
"small": true
}) }}