ComponentRadios
48 of 48 upstream examples match.
Razor component: <NhsukRadios>
Showing the examples from upstream's review app. Show 3 more test-only examples
Default
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
name="example"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message"
}
]
}) }}Default
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
name="example"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
small="true"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message"
}
],
"small": true
}) }}Disabled
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
id-prefix="disabled"
name="example"
disabled="true"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
IdPrefix="disabled"
Name="example"
Disabled="true"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"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-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
id-prefix="disabled"
name="example"
disabled="true"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
small="true"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
IdPrefix="disabled"
Name="example"
Disabled="true"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"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-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
id-prefix="disabled-input"
name="example"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
Disabled = true,
},
])"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
IdPrefix="disabled-input"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
Disabled = true,
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"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-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
id-prefix="disabled-input"
name="example"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
Disabled = true,
},
])"
small="true"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
IdPrefix="disabled-input"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
Disabled = true,
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"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-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
id-prefix="disabled-enabled-input"
name="example"
disabled="true"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
Disabled = false,
},
])"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
IdPrefix="disabled-enabled-input"
Name="example"
Disabled="true"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
Disabled = false,
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"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-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
id-prefix="disabled-enabled-input"
name="example"
disabled="true"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
Disabled = false,
},
])"
small="true"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
IdPrefix="disabled-enabled-input"
Name="example"
Disabled="true"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
Disabled = false,
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"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-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Are you 18 or over?",
Size = "l",
},
})"
id-prefix="inline"
name="example"
inline="true"
items="@([
new RadiosItemsItem
{
Value = "yes",
Text = "Yes",
},
new RadiosItemsItem
{
Value = "no",
Text = "No",
},
])"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Are you 18 or over?",
Size = "l",
},
})"
IdPrefix="inline"
Name="example"
Inline="true"
Items="@([
new RadiosItemsItem
{
Value = "yes",
Text = "Yes",
},
new RadiosItemsItem
{
Value = "no",
Text = "No",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "Are you 18 or over?",
"size": "l"
}
},
"idPrefix": "inline",
"name": "example",
"inline": true,
"items": [
{
"value": "yes",
"text": "Yes"
},
{
"value": "no",
"text": "No"
}
]
}) }}Inline
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Are you 18 or over?",
Size = "m",
},
})"
id-prefix="inline"
name="example"
inline="true"
items="@([
new RadiosItemsItem
{
Value = "yes",
Text = "Yes",
},
new RadiosItemsItem
{
Value = "no",
Text = "No",
},
])"
small="true"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Are you 18 or over?",
Size = "m",
},
})"
IdPrefix="inline"
Name="example"
Inline="true"
Items="@([
new RadiosItemsItem
{
Value = "yes",
Text = "Yes",
},
new RadiosItemsItem
{
Value = "no",
Text = "No",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "Are you 18 or over?",
"size": "m"
}
},
"idPrefix": "inline",
"name": "example",
"inline": true,
"items": [
{
"value": "yes",
"text": "Yes"
},
{
"value": "no",
"text": "No"
}
],
"small": true
}) }}Legend
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = "s",
},
})"
id-prefix="custom-size"
name="example"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = "s",
},
})"
IdPrefix="custom-size"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "s"
}
},
"idPrefix": "custom-size",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message"
}
]
}) }}Legend
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = "m",
},
})"
id-prefix="custom-size"
name="example"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = "m",
},
})"
IdPrefix="custom-size"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "m"
}
},
"idPrefix": "custom-size",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message"
}
]
}) }}Legend
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = "l",
},
})"
id-prefix="custom-size"
name="example"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = "l",
},
})"
IdPrefix="custom-size"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "l"
}
},
"idPrefix": "custom-size",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message"
}
]
}) }}Legend
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = "xl",
},
})"
id-prefix="custom-size"
name="example"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = "xl",
},
})"
IdPrefix="custom-size"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": "xl"
}
},
"idPrefix": "custom-size",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message"
}
]
}) }}With conditional content
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
hint="Select 1 option"
id-prefix="conditional"
name="example"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new RadiosItemsConditionalOptions
{
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
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
Hint="@(new HintOptions
{
Text = "Select 1 option",
})"
IdPrefix="conditional"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new RadiosItemsConditionalOptions
{
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/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"hint": {
"text": "Select 1 option"
},
"idPrefix": "conditional",
"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"
}
}
]
}) }}With conditional content
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
hint="Select 1 option"
id-prefix="conditional"
name="example"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new RadiosItemsConditionalOptions
{
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
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
Hint="@(new HintOptions
{
Text = "Select 1 option",
})"
IdPrefix="conditional"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new RadiosItemsConditionalOptions
{
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/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"hint": {
"text": "Select 1 option"
},
"idPrefix": "conditional",
"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"
}
}
],
"small": true
}) }}With conditional content, error message
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
hint="Select 1 option"
error-message="Select how you want to be contacted"
id-prefix="conditional"
name="example"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new RadiosItemsConditionalOptions
{
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
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
Hint="@(new HintOptions
{
Text = "Select 1 option",
})"
ErrorMessage="@(new ErrorMessageOptions
{
Text = "Select how you want to be contacted",
})"
IdPrefix="conditional"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new RadiosItemsConditionalOptions
{
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/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"hint": {
"text": "Select 1 option"
},
"errorMessage": {
"text": "Select how you want to be contacted"
},
"idPrefix": "conditional",
"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"
}
}
]
}) }}With conditional content, error message
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
hint="Select 1 option"
error-message="Select how you want to be contacted"
id-prefix="conditional"
name="example"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new RadiosItemsConditionalOptions
{
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
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
Hint="@(new HintOptions
{
Text = "Select 1 option",
})"
ErrorMessage="@(new ErrorMessageOptions
{
Text = "Select how you want to be contacted",
})"
IdPrefix="conditional"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new RadiosItemsConditionalOptions
{
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/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"hint": {
"text": "Select 1 option"
},
"errorMessage": {
"text": "Select how you want to be contacted"
},
"idPrefix": "conditional",
"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"
}
}
],
"small": true
}) }}With conditional content, error message (nested)
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
hint="Select 1 option"
id-prefix="conditional"
name="example"
value="phone"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new RadiosItemsConditionalOptions
{
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
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
Hint="@(new HintOptions
{
Text = "Select 1 option",
})"
IdPrefix="conditional"
Name="example"
Value="phone"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new RadiosItemsConditionalOptions
{
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/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"hint": {
"text": "Select 1 option"
},
"idPrefix": "conditional",
"name": "example",
"value": "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-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
hint="Select 1 option"
id-prefix="conditional"
name="example"
value="phone"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new RadiosItemsConditionalOptions
{
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
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
Hint="@(new HintOptions
{
Text = "Select 1 option",
})"
IdPrefix="conditional"
Name="example"
Value="phone"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new RadiosItemsConditionalOptions
{
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/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"hint": {
"text": "Select 1 option"
},
"idPrefix": "conditional",
"name": "example",
"value": "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 divider
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Do you know your NHS number?",
Size = "l",
},
})"
hint-options="@(new HintOptions
{
Html = "This is a 10 digit number (like <span class=\"nhsuk-u-nowrap\">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App",
})"
id-prefix="with-divider"
name="example"
items="@([
new RadiosItemsItem
{
Value = "yes",
Text = "Yes, I know my NHS number",
},
new RadiosItemsItem
{
Value = "no",
Text = "No, I do not know my NHS number",
},
new RadiosItemsItem
{
Divider = "or",
},
new RadiosItemsItem
{
Value = "not sure",
Text = "I'm not sure",
},
])"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Do you know your NHS number?",
Size = "l",
},
})"
Hint="@(new HintOptions
{
Html = "This is a 10 digit number (like <span class=\"nhsuk-u-nowrap\">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App",
})"
IdPrefix="with-divider"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "yes",
Text = "Yes, I know my NHS number",
},
new RadiosItemsItem
{
Value = "no",
Text = "No, I do not know my NHS number",
},
new RadiosItemsItem
{
Divider = "or",
},
new RadiosItemsItem
{
Value = "not sure",
Text = "I'm not sure",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "Do you know your NHS number?",
"size": "l"
}
},
"hint": {
"html": "This is a 10 digit number (like <span class=\"nhsuk-u-nowrap\">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App"
},
"idPrefix": "with-divider",
"name": "example",
"items": [
{
"value": "yes",
"text": "Yes, I know my NHS number"
},
{
"value": "no",
"text": "No, I do not know my NHS number"
},
{
"divider": "or"
},
{
"value": "not sure",
"text": "I'm not sure"
}
]
}) }}With divider
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Do you know your NHS number?",
Size = "m",
},
})"
hint-options="@(new HintOptions
{
Html = "This is a 10 digit number (like <span class=\"nhsuk-u-nowrap\">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App",
})"
id-prefix="with-divider"
name="example"
items="@([
new RadiosItemsItem
{
Value = "yes",
Text = "Yes, I know my NHS number",
},
new RadiosItemsItem
{
Value = "no",
Text = "No, I do not know my NHS number",
},
new RadiosItemsItem
{
Divider = "or",
},
new RadiosItemsItem
{
Value = "not sure",
Text = "I'm not sure",
},
])"
small="true"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Do you know your NHS number?",
Size = "m",
},
})"
Hint="@(new HintOptions
{
Html = "This is a 10 digit number (like <span class=\"nhsuk-u-nowrap\">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App",
})"
IdPrefix="with-divider"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "yes",
Text = "Yes, I know my NHS number",
},
new RadiosItemsItem
{
Value = "no",
Text = "No, I do not know my NHS number",
},
new RadiosItemsItem
{
Divider = "or",
},
new RadiosItemsItem
{
Value = "not sure",
Text = "I'm not sure",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "Do you know your NHS number?",
"size": "m"
}
},
"hint": {
"html": "This is a 10 digit number (like <span class=\"nhsuk-u-nowrap\">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App"
},
"idPrefix": "with-divider",
"name": "example",
"items": [
{
"value": "yes",
"text": "Yes, I know my NHS number"
},
{
"value": "no",
"text": "No, I do not know my NHS number"
},
{
"divider": "or"
},
{
"value": "not sure",
"text": "I'm not sure"
}
],
"small": true
}) }}With error message
Razor Pages and MVC
<nhsuk-radios
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 RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Blazor
<NhsukRadios
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 RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"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",
"text": "Text message"
}
]
}) }}With error message
Razor Pages and MVC
<nhsuk-radios
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 RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
small="true"
/>Blazor
<NhsukRadios
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 RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"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",
"text": "Text message"
}
],
"small": true
}) }}With error message and hint
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
hint="Select 1 option"
error-message="Select how you want to be contacted"
id-prefix="with-hint-error"
name="example"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
Hint="@(new HintOptions
{
Text = "Select 1 option",
})"
ErrorMessage="@(new ErrorMessageOptions
{
Text = "Select how you want to be contacted",
})"
IdPrefix="with-hint-error"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"hint": {
"text": "Select 1 option"
},
"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",
"text": "Text message"
}
]
}) }}With error message and hint
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
hint="Select 1 option"
error-message="Select how you want to be contacted"
id-prefix="with-hint-error"
name="example"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
small="true"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
Hint="@(new HintOptions
{
Text = "Select 1 option",
})"
ErrorMessage="@(new ErrorMessageOptions
{
Text = "Select how you want to be contacted",
})"
IdPrefix="with-hint-error"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"hint": {
"text": "Select 1 option"
},
"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",
"text": "Text message"
}
],
"small": true
}) }}With error message and hint as strings
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
hint="Select 1 option"
error-message="Select how you want to be contacted"
id-prefix="with-hint-error"
name="example"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
Hint="@("Select 1 option")"
ErrorMessage="@("Select how you want to be contacted")"
IdPrefix="with-hint-error"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"hint": "Select 1 option",
"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",
"text": "Text message"
}
]
}) }}With error message and hint as strings
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
hint="Select 1 option"
error-message="Select how you want to be contacted"
id-prefix="with-hint-error"
name="example"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
small="true"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
Hint="@("Select 1 option")"
ErrorMessage="@("Select how you want to be contacted")"
IdPrefix="with-hint-error"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"hint": "Select 1 option",
"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",
"text": "Text message"
}
],
"small": true
}) }}With error message and hint, without heading
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = null,
},
})"
hint="Select 1 option"
error-message="Select how you want to be contacted"
id-prefix="with-hint-error"
name="example"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = null,
},
})"
Hint="@(new HintOptions
{
Text = "Select 1 option",
})"
ErrorMessage="@(new ErrorMessageOptions
{
Text = "Select how you want to be contacted",
})"
IdPrefix="with-hint-error"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": null
}
},
"hint": {
"text": "Select 1 option"
},
"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",
"text": "Text message"
}
]
}) }}With error message and hint, without heading
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = null,
},
})"
hint="Select 1 option"
error-message="Select how you want to be contacted"
id-prefix="with-hint-error"
name="example"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
small="true"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Text = "How do you want to be contacted about this?",
Size = null,
},
})"
Hint="@(new HintOptions
{
Text = "Select 1 option",
})"
ErrorMessage="@(new ErrorMessageOptions
{
Text = "Select how you want to be contacted",
})"
IdPrefix="with-hint-error"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"text": "How do you want to be contacted about this?",
"size": null
}
},
"hint": {
"text": "Select 1 option"
},
"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",
"text": "Text message"
}
],
"small": true
}) }}With error message, without heading
Razor Pages and MVC
<nhsuk-radios
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 RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Blazor
<NhsukRadios
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 RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"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",
"text": "Text message"
}
]
}) }}With error message, without heading
Razor Pages and MVC
<nhsuk-radios
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 RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
small="true"
/>Blazor
<NhsukRadios
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 RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"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",
"text": "Text message"
}
],
"small": true
}) }}With error only
Razor Pages and MVC
<nhsuk-radios
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 RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Blazor
<NhsukRadios
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 RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"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",
"text": "Text message"
}
]
}) }}With hint
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
hint="Select 1 option"
id-prefix="with-hint"
name="example"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
Hint="@(new HintOptions
{
Text = "Select 1 option",
})"
IdPrefix="with-hint"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"hint": {
"text": "Select 1 option"
},
"idPrefix": "with-hint",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message"
}
]
}) }}With hint
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
hint="Select 1 option"
id-prefix="with-hint"
name="example"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
small="true"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
Hint="@(new HintOptions
{
Text = "Select 1 option",
})"
IdPrefix="with-hint"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"hint": {
"text": "Select 1 option"
},
"idPrefix": "with-hint",
"name": "example",
"items": [
{
"value": "email",
"text": "Email"
},
{
"value": "phone",
"text": "Phone"
},
{
"value": "text",
"text": "Text message"
}
],
"small": true
}) }}With hints on items
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Do you have a mobile phone with signal?",
Size = "l",
},
})"
id-prefix="with-hint-item"
name="example"
items="@([
new RadiosItemsItem
{
Value = "mobile",
Text = "Yes, I have a mobile phone with signal",
Hint = new HintOptions
{
Text = "We will text you a 6 digit security code",
},
},
new RadiosItemsItem
{
Value = "landline",
Text = "No, I want to use my landline",
Hint = new HintOptions
{
Text = "We will call you to give you a 6 digit security code",
},
},
])"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Do you have a mobile phone with signal?",
Size = "l",
},
})"
IdPrefix="with-hint-item"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "mobile",
Text = "Yes, I have a mobile phone with signal",
Hint = new HintOptions
{
Text = "We will text you a 6 digit security code",
},
},
new RadiosItemsItem
{
Value = "landline",
Text = "No, I want to use my landline",
Hint = new HintOptions
{
Text = "We will call you to give you a 6 digit security code",
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "Do you have a mobile phone with signal?",
"size": "l"
}
},
"idPrefix": "with-hint-item",
"name": "example",
"items": [
{
"value": "mobile",
"text": "Yes, I have a mobile phone with signal",
"hint": {
"text": "We will text you a 6 digit security code"
}
},
{
"value": "landline",
"text": "No, I want to use my landline",
"hint": {
"text": "We will call you to give you a 6 digit security code"
}
}
]
}) }}With hints on items
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Do you have a mobile phone with signal?",
Size = "m",
},
})"
id-prefix="with-hint-item"
name="example"
items="@([
new RadiosItemsItem
{
Value = "mobile",
Text = "Yes, I have a mobile phone with signal",
Hint = new HintOptions
{
Text = "We will text you a 6 digit security code",
},
},
new RadiosItemsItem
{
Value = "landline",
Text = "No, I want to use my landline",
Hint = new HintOptions
{
Text = "We will call you to give you a 6 digit security code",
},
},
])"
small="true"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Do you have a mobile phone with signal?",
Size = "m",
},
})"
IdPrefix="with-hint-item"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "mobile",
Text = "Yes, I have a mobile phone with signal",
Hint = new HintOptions
{
Text = "We will text you a 6 digit security code",
},
},
new RadiosItemsItem
{
Value = "landline",
Text = "No, I want to use my landline",
Hint = new HintOptions
{
Text = "We will call you to give you a 6 digit security code",
},
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "Do you have a mobile phone with signal?",
"size": "m"
}
},
"idPrefix": "with-hint-item",
"name": "example",
"items": [
{
"value": "mobile",
"text": "Yes, I have a mobile phone with signal",
"hint": {
"text": "We will text you a 6 digit security code"
}
},
{
"value": "landline",
"text": "No, I want to use my landline",
"hint": {
"text": "We will call you to give you a 6 digit security code"
}
}
],
"small": true
}) }}With long text
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Venenatis Condimentum",
Size = "l",
},
})"
id-prefix="with-long-text"
name="example"
items="@([
new RadiosItemsItem
{
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 RadiosItemsItem
{
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 RadiosItemsItem
{
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
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Venenatis Condimentum",
Size = "l",
},
})"
IdPrefix="with-long-text"
Name="example"
Items="@([
new RadiosItemsItem
{
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 RadiosItemsItem
{
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 RadiosItemsItem
{
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/radios/macro.njk" import radios %}
{{ radios({
"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-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Venenatis Condimentum",
Size = "m",
},
})"
id-prefix="with-long-text"
name="example"
items="@([
new RadiosItemsItem
{
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 RadiosItemsItem
{
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 RadiosItemsItem
{
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
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "Venenatis Condimentum",
Size = "m",
},
})"
IdPrefix="with-long-text"
Name="example"
Items="@([
new RadiosItemsItem
{
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 RadiosItemsItem
{
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 RadiosItemsItem
{
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/radios/macro.njk" import radios %}
{{ radios({
"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 nested conditional radios
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
hint="Select 1 option"
id-prefix="conditional-nested"
name="example-outer"
items="@([
new RadiosItemsItem
{
Value = "no-conditional",
Text = "No conditional",
},
new RadiosItemsItem
{
Value = "nested",
Text = "Nested conditional",
Conditional = new RadiosItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<fieldset class=""nhsuk-fieldset"" aria-describedby=""example-inner-hint"">
<legend class=""nhsuk-fieldset__legend nhsuk-fieldset__legend--s"">
How do you want to be contacted about this?
</legend>
<div class=""nhsuk-hint"" id=""example-inner-hint"">
Select 1 option
</div>
<div class=""nhsuk-radios"" data-module=""nhsuk-radios"">
<div class=""nhsuk-radios__item"">
<input class=""nhsuk-radios__input"" id=""example-inner"" name=""example-inner"" type=""radio"" value=""email"" data-aria-controls=""conditional-example-inner"">
<label class=""nhsuk-label nhsuk-radios__label"" for=""example-inner"">
Email
</label>
</div>
<div class=""nhsuk-radios__conditional nhsuk-radios__conditional--hidden"" id=""conditional-example-inner"">
<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>
</div>
<div class=""nhsuk-radios__item"">
<input class=""nhsuk-radios__input"" id=""example-inner-2"" name=""example-inner"" type=""radio"" value=""phone"" data-aria-controls=""conditional-example-inner-2"">
<label class=""nhsuk-label nhsuk-radios__label"" for=""example-inner-2"">
Phone
</label>
</div>
<div class=""nhsuk-radios__conditional nhsuk-radios__conditional--hidden"" id=""conditional-example-inner-2"">
<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>
</div>
<div class=""nhsuk-radios__item"">
<input class=""nhsuk-radios__input"" id=""example-inner-3"" name=""example-inner"" type=""radio"" value=""text"" data-aria-controls=""conditional-example-inner-3"">
<label class=""nhsuk-label nhsuk-radios__label"" for=""example-inner-3"">
Text message
</label>
</div>
<div class=""nhsuk-radios__conditional nhsuk-radios__conditional--hidden"" id=""conditional-example-inner-3"">
<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>
</div>
</div>
</fieldset>
</div>
",
},
},
])"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
Hint="@(new HintOptions
{
Text = "Select 1 option",
})"
IdPrefix="conditional-nested"
Name="example-outer"
Items="@([
new RadiosItemsItem
{
Value = "no-conditional",
Text = "No conditional",
},
new RadiosItemsItem
{
Value = "nested",
Text = "Nested conditional",
Conditional = new RadiosItemsConditionalOptions
{
Html = @"<div class=""nhsuk-form-group"">
<fieldset class=""nhsuk-fieldset"" aria-describedby=""example-inner-hint"">
<legend class=""nhsuk-fieldset__legend nhsuk-fieldset__legend--s"">
How do you want to be contacted about this?
</legend>
<div class=""nhsuk-hint"" id=""example-inner-hint"">
Select 1 option
</div>
<div class=""nhsuk-radios"" data-module=""nhsuk-radios"">
<div class=""nhsuk-radios__item"">
<input class=""nhsuk-radios__input"" id=""example-inner"" name=""example-inner"" type=""radio"" value=""email"" data-aria-controls=""conditional-example-inner"">
<label class=""nhsuk-label nhsuk-radios__label"" for=""example-inner"">
Email
</label>
</div>
<div class=""nhsuk-radios__conditional nhsuk-radios__conditional--hidden"" id=""conditional-example-inner"">
<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>
</div>
<div class=""nhsuk-radios__item"">
<input class=""nhsuk-radios__input"" id=""example-inner-2"" name=""example-inner"" type=""radio"" value=""phone"" data-aria-controls=""conditional-example-inner-2"">
<label class=""nhsuk-label nhsuk-radios__label"" for=""example-inner-2"">
Phone
</label>
</div>
<div class=""nhsuk-radios__conditional nhsuk-radios__conditional--hidden"" id=""conditional-example-inner-2"">
<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>
</div>
<div class=""nhsuk-radios__item"">
<input class=""nhsuk-radios__input"" id=""example-inner-3"" name=""example-inner"" type=""radio"" value=""text"" data-aria-controls=""conditional-example-inner-3"">
<label class=""nhsuk-label nhsuk-radios__label"" for=""example-inner-3"">
Text message
</label>
</div>
<div class=""nhsuk-radios__conditional nhsuk-radios__conditional--hidden"" id=""conditional-example-inner-3"">
<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>
</div>
</div>
</fieldset>
</div>
",
},
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"hint": {
"text": "Select 1 option"
},
"idPrefix": "conditional-nested",
"name": "example-outer",
"items": [
{
"value": "no-conditional",
"text": "No conditional"
},
{
"value": "nested",
"text": "Nested conditional",
"conditional": {
"html": "<div class=\"nhsuk-form-group\">\n <fieldset class=\"nhsuk-fieldset\" aria-describedby=\"example-inner-hint\">\n <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--s\">\n How do you want to be contacted about this?\n </legend>\n <div class=\"nhsuk-hint\" id=\"example-inner-hint\">\n Select 1 option\n </div>\n <div class=\"nhsuk-radios\" data-module=\"nhsuk-radios\">\n <div class=\"nhsuk-radios__item\">\n <input class=\"nhsuk-radios__input\" id=\"example-inner\" name=\"example-inner\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-example-inner\">\n <label class=\"nhsuk-label nhsuk-radios__label\" for=\"example-inner\">\n Email\n </label>\n </div>\n <div class=\"nhsuk-radios__conditional nhsuk-radios__conditional--hidden\" id=\"conditional-example-inner\">\n <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 </div>\n <div class=\"nhsuk-radios__item\">\n <input class=\"nhsuk-radios__input\" id=\"example-inner-2\" name=\"example-inner\" type=\"radio\" value=\"phone\" data-aria-controls=\"conditional-example-inner-2\">\n <label class=\"nhsuk-label nhsuk-radios__label\" for=\"example-inner-2\">\n Phone\n </label>\n </div>\n <div class=\"nhsuk-radios__conditional nhsuk-radios__conditional--hidden\" id=\"conditional-example-inner-2\">\n <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 </div>\n <div class=\"nhsuk-radios__item\">\n <input class=\"nhsuk-radios__input\" id=\"example-inner-3\" name=\"example-inner\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-example-inner-3\">\n <label class=\"nhsuk-label nhsuk-radios__label\" for=\"example-inner-3\">\n Text message\n </label>\n </div>\n <div class=\"nhsuk-radios__conditional nhsuk-radios__conditional--hidden\" id=\"conditional-example-inner-3\">\n <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 </div>\n </div>\n</fieldset>\n</div>\n"
}
}
]
}) }}Without fieldset
Razor Pages and MVC
<nhsuk-radios
fieldset="@(null)"
id-prefix="without-fieldset"
name="colours"
items="@([
new RadiosItemsItem
{
Value = "red",
Text = "Red",
},
new RadiosItemsItem
{
Value = "green",
Text = "Green",
},
new RadiosItemsItem
{
Value = "blue",
Text = "Blue",
},
])"
/>Blazor
<NhsukRadios
Fieldset="@(null)"
IdPrefix="without-fieldset"
Name="colours"
Items="@([
new RadiosItemsItem
{
Value = "red",
Text = "Red",
},
new RadiosItemsItem
{
Value = "green",
Text = "Green",
},
new RadiosItemsItem
{
Value = "blue",
Text = "Blue",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"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-radios
fieldset="@(null)"
id-prefix="without-fieldset"
name="colours"
items="@([
new RadiosItemsItem
{
Value = "red",
Text = "Red",
},
new RadiosItemsItem
{
Value = "green",
Text = "Green",
},
new RadiosItemsItem
{
Value = "blue",
Text = "Blue",
},
])"
small="true"
/>Blazor
<NhsukRadios
Fieldset="@(null)"
IdPrefix="without-fieldset"
Name="colours"
Items="@([
new RadiosItemsItem
{
Value = "red",
Text = "Red",
},
new RadiosItemsItem
{
Value = "green",
Text = "Green",
},
new RadiosItemsItem
{
Value = "blue",
Text = "Blue",
},
])"
Small="true"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"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-radios
fieldset="@(new FieldsetOptions
{
Legend = "How do you want to be contacted about this?",
})"
id-prefix="without-heading"
name="example"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Blazor
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = "How do you want to be contacted about this?",
})"
IdPrefix="without-heading"
Name="example"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
},
new RadiosItemsItem
{
Value = "phone",
Text = "Phone",
},
new RadiosItemsItem
{
Value = "text",
Text = "Text message",
},
])"
/>Nunjucks (upstream)
{% from "nhsuk/components/radios/macro.njk" import radios %}
{{ radios({
"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",
"text": "Text message"
}
]
}) }}With pre-checked value
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
hint="Select 1 option"
id-prefix="conditional"
name="example"
value="email"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new RadiosItemsConditionalOptions
{
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
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "l",
},
})"
Hint="@(new HintOptions
{
Text = "Select 1 option",
})"
IdPrefix="conditional"
Name="example"
Value="email"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new RadiosItemsConditionalOptions
{
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/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "l"
}
},
"hint": {
"text": "Select 1 option"
},
"idPrefix": "conditional",
"name": "example",
"value": "email",
"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 value
Razor Pages and MVC
<nhsuk-radios
fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
hint="Select 1 option"
id-prefix="conditional"
name="example"
value="email"
items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new RadiosItemsConditionalOptions
{
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
<NhsukRadios
Fieldset="@(new FieldsetOptions
{
Legend = new LegendOptions
{
Heading = "How do you want to be contacted about this?",
Size = "m",
},
})"
Hint="@(new HintOptions
{
Text = "Select 1 option",
})"
IdPrefix="conditional"
Name="example"
Value="email"
Items="@([
new RadiosItemsItem
{
Value = "email",
Text = "Email",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "phone",
Text = "Phone",
Conditional = new RadiosItemsConditionalOptions
{
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 RadiosItemsItem
{
Value = "text",
Text = "Text message",
Conditional = new RadiosItemsConditionalOptions
{
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/radios/macro.njk" import radios %}
{{ radios({
"fieldset": {
"legend": {
"heading": "How do you want to be contacted about this?",
"size": "m"
}
},
"hint": {
"text": "Select 1 option"
},
"idPrefix": "conditional",
"name": "example",
"value": "email",
"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
}) }}