Radios examples

Show params

Params

params:
- name: fieldset
  type: object
  required: false
  description: Options for the fieldset component (e.g. legend).
  isComponent: true
- name: hint
  type: object
  required: false
  description: Options for the hint component (e.g. text).
  isComponent: true
- name: errorMessage
  type: object
  required: false
  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
  isComponent: true
- name: formGroup
  type: object
  required: false
  description: Options for the form-group wrapper
  params:
  - name: classes
    type: string
    required: false
    description: Classes to add to the form group (e.g. to show error state for the whole group)
- name: idPrefix
  type: string
  required: false
  description: String to prefix id for each checkbox item if no id is specified on each item. If `idPrefix` is not passed, fallback to using the name attribute instead.
- name: name
  type: string
  required: true
  description: Name attribute for each radio item.
- name: items
  type: array
  required: true
  description: Array of radio items objects.
  params:
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within each radio item label. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within each radio item label. If `html` is provided, the `text` argument will be ignored.
  - name: id
    type: string
    required: false
    description: Specific id attribute for the radio item. If omitted, then `idPrefix` string will be applied.
  - name: value
    type: string
    required: true
    description: Value for the radio input.
  - name: label
    type: object
    required: false
    description: Provide attributes and classes to each radio item label.
    isComponent: true
  - name: hint
    type: object
    required: false
    description: Provide hint to each checkbox item.
    isComponent: true
  - name: divider
    type: string
    required: false
    description: Divider text to separate radio items, for example the text "or".
  - name: checked
    type: boolean
    required: false
    description: If true, radio will be checked.
  - name: conditional
    type: string
    required: false
    description: If true, content provided will be revealed when the item is checked.
  - name: conditional.html
    type: html
    required: false
    description: Provide content for the conditional reveal.
  - name: disabled
    type: boolean
    required: false
    description: If true, radio will be disabled.
  - name: classes
    type: string
    required: false
    description: Classes to add to the item.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the radio input tag.
- name: hasDividers
  type: boolean
  required: false
  description: With hasDividers equal to true, the items have an horizontal border to visually separate items.
- name: classes
  type: string
  required: false
  description: Classes to add to the radio container.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the radio input tag.

accessibilityCriteria: |
  ## Conditional reveals
  Must:
  - be visible as static content if JavaScript is unavailable or fails
  - be hidden if JavaScript is available and is collapsed
  - indicate if content is expanded or collapsed
  - indicate that there is collapsed content to interact with

  Note that we have known issues against this criteria: https://github.com/alphagov/govuk_elements/issues/575

default

Have you changed your name?

This includes changing your last name or spelling your name differently.

Show code

Macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}
{{ componentRadios({
  "idPrefix": "default",
  "name": "default",
  "fieldset": {
    "legend": {
      "text": "Have you changed your name?"
    }
  },
  "hint": {
    "text": "This includes changing your last name or spelling your name differently."
  },
  "items": [
    {
      "value": "yes",
      "text": "Yes"
    },
    {
      "value": "no",
      "text": "No",
      "checked": true
    }
  ]
})  }}

Markup


<!-- radios -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="default-hint">
  <legend class="  font-bold">
    Have you changed your name?
  </legend>
    <!-- hint -->
  <p id="default-hint" class="block text-neutral-dark">
    This includes changing your last name or spelling your name differently.
  </p>
  <!-- /hint -->
  <div x-data="{ isChecked: &quot;no&quot; }" class="c-radios">
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="default" name="default" type="radio" value="yes">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="default">Yes</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
        </div>
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="default-2" name="default" type="radio" value="no" checked>
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="default-2">No</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
        </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /radios -->

inline

Have you changed your name?

This includes changing your last name or spelling your name differently.

Show code

Macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}
{{ componentRadios({
  "idPrefix": "inline",
  "classes": "flex",
  "name": "inline",
  "fieldset": {
    "legend": {
      "text": "Have you changed your name?"
    }
  },
  "hint": {
    "text": "This includes changing your last name or spelling your name differently."
  },
  "items": [
    {
      "value": "yes",
      "text": "Yes",
      "classes": "mr-sm"
    },
    {
      "value": "no",
      "text": "No",
      "classes": "mr-sm",
      "checked": true
    }
  ]
})  }}

Markup


<!-- radios -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="inline-hint">
  <legend class="  font-bold">
    Have you changed your name?
  </legend>
    <!-- hint -->
  <p id="inline-hint" class="block text-neutral-dark">
    This includes changing your last name or spelling your name differently.
  </p>
  <!-- /hint -->
  <div x-data="{ isChecked: &quot;no&quot; }" class="c-radios flex">
        <div class=" mr-sm">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="inline" name="inline" type="radio" value="yes">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="inline">Yes</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
        </div>
        <div class=" mr-sm">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="inline-2" name="inline" type="radio" value="no" checked>
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="inline-2">No</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
        </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /radios -->

with disabled

Have you changed your name?

This includes changing your last name or spelling your name differently.

Show code

Macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}
{{ componentRadios({
  "idPrefix": "example-disabled",
  "name": "example-disabled",
  "fieldset": {
    "legend": {
      "text": "Have you changed your name?"
    }
  },
  "hint": {
    "text": "This includes changing your last name or spelling your name differently."
  },
  "items": [
    {
      "value": "yes",
      "text": "Yes",
      "disabled": true,
      "checked": true
    },
    {
      "value": "no",
      "text": "No",
      "disabled": true
    }
  ]
})  }}

Markup


<!-- radios -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="example-disabled-hint">
  <legend class="  font-bold">
    Have you changed your name?
  </legend>
    <!-- hint -->
  <p id="example-disabled-hint" class="block text-neutral-dark">
    This includes changing your last name or spelling your name differently.
  </p>
  <!-- /hint -->
  <div x-data="{ isChecked: &quot;yes&quot; }" class="c-radios">
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="example-disabled" name="example-disabled" type="radio" value="yes" checked disabled>
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="example-disabled">Yes</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
        </div>
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="example-disabled-2" name="example-disabled" type="radio" value="no" disabled>
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="example-disabled-2">No</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
        </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /radios -->

with legend as page heading

use optional headingLevel param to set if h1, h2 h3...

Which part of the Housing Act was your licence issued under?

Select one of the options below.

Show code

Macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}
{{ componentRadios({
  "idPrefix": "legend-as-page-heading",
  "name": "legend-as-page-heading",
  "fieldset": {
    "legend": {
      "text": "Which part of the Housing Act was your licence issued under?",
      "classes": "c-h2",
      "isPageHeading": true
    },
    "headingLevel": 2
  },
  "hint": {
    "text": "Select one of the options below."
  },
  "items": [
    {
      "value": "part-2",
      "html": "<span class=\" block font-bold \">Part 2 of the Housing Act 2004</span> <span class=\" font-normal \">For properties that are 3 or more stories high and occupied by 5 or more people</span>"
    },
    {
      "value": "part-3",
      "html": "<span class=\" block font-bold \">Part 3 of the Housing Act 2004</span> <span class=\" font-normal \">For properties that are within a geographical area defined by a local council</span>"
    }
  ]
})  }}

Markup


<!-- radios -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="legend-as-page-heading-hint">
  <legend class="c-h2">
      <h2>Which part of the Housing Act was your licence issued under?</h2>
  </legend>
    <!-- hint -->
  <p id="legend-as-page-heading-hint" class="block text-neutral-dark">
    Select one of the options below.
  </p>
  <!-- /hint -->
  <div x-data="{ isChecked: false }" class="c-radios">
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="legend-as-page-heading" name="legend-as-page-heading" type="radio" value="part-2">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="legend-as-page-heading"><span class=" block font-bold ">Part 2 of the Housing Act 2004</span> <span class=" font-normal ">For properties that are 3 or more stories high and occupied by 5 or more people</span></label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
        </div>
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="legend-as-page-heading-2" name="legend-as-page-heading" type="radio" value="part-3">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="legend-as-page-heading-2"><span class=" block font-bold ">Part 3 of the Housing Act 2004</span> <span class=" font-normal ">For properties that are within a geographical area defined by a local council</span></label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
        </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /radios -->

with a medium legend

Which part of the Housing Act was your licence issued under?

Select one of the options below.

Show code

Macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}
{{ componentRadios({
  "idPrefix": "medium-legend",
  "name": "medium-legend",
  "fieldset": {
    "legend": {
      "text": "Which part of the Housing Act was your licence issued under?",
      "classes": "c-h2"
    }
  },
  "hint": {
    "text": "Select one of the options below."
  },
  "items": [
    {
      "value": "part-2",
      "html": "<span class=\" block font-bold \">Part 2 of the Housing Act 2004</span> <span class=\" font-normal \">For properties that are 3 or more stories high and occupied by 5 or more people</span>"
    },
    {
      "value": "part-3",
      "html": "<span class=\" block font-bold \">Part 3 of the Housing Act 2004</span> <span class=\" font-normal \">For properties that are within a geographical area defined by a local council</span>"
    }
  ]
})  }}

Markup


<!-- radios -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="medium-legend-hint">
  <legend class="c-h2">
    Which part of the Housing Act was your licence issued under?
  </legend>
    <!-- hint -->
  <p id="medium-legend-hint" class="block text-neutral-dark">
    Select one of the options below.
  </p>
  <!-- /hint -->
  <div x-data="{ isChecked: false }" class="c-radios">
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="medium-legend" name="medium-legend" type="radio" value="part-2">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="medium-legend"><span class=" block font-bold ">Part 2 of the Housing Act 2004</span> <span class=" font-normal ">For properties that are 3 or more stories high and occupied by 5 or more people</span></label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
        </div>
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="medium-legend-2" name="medium-legend" type="radio" value="part-3">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="medium-legend-2"><span class=" block font-bold ">Part 3 of the Housing Act 2004</span> <span class=" font-normal ">For properties that are within a geographical area defined by a local council</span></label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
        </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /radios -->

with a divider

How do you want to sign in?

or

Show code

Macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}
{{ componentRadios({
  "idPrefix": "example-divider",
  "name": "example-divider",
  "fieldset": {
    "legend": {
      "text": "How do you want to sign in?"
    }
  },
  "items": [
    {
      "value": "governement-gateway",
      "text": "Use Digital Cert"
    },
    {
      "value": "clave-verify",
      "text": "Use Cl@ve"
    },
    {
      "divider": "or"
    },
    {
      "value": "create-account",
      "text": "Create an account"
    }
  ]
})  }}

Markup


<!-- radios -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset>
  <legend class="  font-bold">
    How do you want to sign in?
  </legend>
    <div x-data="{ isChecked: false }" class="c-radios">
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="example-divider" name="example-divider" type="radio" value="governement-gateway">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="example-divider">Use Digital Cert</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
        </div>
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="example-divider-2" name="example-divider" type="radio" value="clave-verify">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="example-divider-2">Use Cl@ve</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
        </div>
        <div class="">          <div><p>or</p></div>        </div>
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="example-divider-4" name="example-divider" type="radio" value="create-account">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="example-divider-4">Create an account</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
        </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /radios -->

with hints on items

How do you want to sign in?

You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.

You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.

Show code

Macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}
{{ componentRadios({
  "idPrefix": "hints-on-items",
  "name": "hints-on-items",
  "fieldset": {
    "legend": {
      "text": "How do you want to sign in?",
      "isPageHeading": true
    }
  },
  "items": [
    {
      "value": "gateway",
      "text": "Sign in with Digital Cert",
      "hint": {
        "text": "You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before."
      }
    },
    {
      "value": "verify",
      "text": "Sign in with Cl@ve",
      "hint": {
        "text": "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
      }
    }
  ]
})  }}

Markup


<!-- radios -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset>
  <legend class="  font-bold">
    
      <h1>How do you want to sign in?</h1>
  </legend>
    <div x-data="{ isChecked: false }" class="c-radios">
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="hints-on-items" name="hints-on-items" type="radio" value="gateway" aria-describedby="hints-on-items-item-hint">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="hints-on-items">Sign in with Digital Cert</label>
      
      <!-- /label -->
                <!-- hint -->
      <p id="hints-on-items-item-hint" class="block text-neutral-dark">
        You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.
      </p>
      <!-- /hint -->
              </div>
            </div>
          </div>
        </div>
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="hints-on-items-2" name="hints-on-items" type="radio" value="verify" aria-describedby="hints-on-items-2-item-hint">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="hints-on-items-2">Sign in with Cl@ve</label>
      
      <!-- /label -->
                <!-- hint -->
      <p id="hints-on-items-2-item-hint" class="block text-neutral-dark">
        You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.
      </p>
      <!-- /hint -->
              </div>
            </div>
          </div>
        </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /radios -->

with hasDividers

How do you want to sign in?

Please, choose the right answer.

You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.

You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.

Show code

Macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}
{{ componentRadios({
  "idPrefix": "has-dividers",
  "name": "has-dividers",
  "fieldset": {
    "legend": {
      "text": "How do you want to sign in?"
    }
  },
  "hint": {
    "text": "Please, choose the right answer."
  },
  "hasDividers": true,
  "items": [
    {
      "value": "gateway",
      "text": "Sign in with Digital Cert",
      "classes": "font-normal",
      "hint": {
        "text": "You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before."
      }
    },
    {
      "value": "verify",
      "text": "Sign in with Cl@ve",
      "hint": {
        "text": "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
      }
    }
  ]
})  }}

Markup


<!-- radios -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="has-dividers-hint">
  <legend class="  font-bold">
    How do you want to sign in?
  </legend>
    <!-- hint -->
  <p id="has-dividers-hint" class="block text-neutral-dark">
    Please, choose the right answer.
  </p>
  <!-- /hint -->
  <div x-data="{ isChecked: false }" class="c-radios">
        <div class=" border-t border-b border-neutral-base -mb-px font-normal">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="has-dividers" name="has-dividers" type="radio" value="gateway" aria-describedby="has-dividers-item-hint">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="has-dividers">Sign in with Digital Cert</label>
      
      <!-- /label -->
                <!-- hint -->
      <p id="has-dividers-item-hint" class="block text-neutral-dark">
        You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.
      </p>
      <!-- /hint -->
              </div>
            </div>
          </div>
        </div>
        <div class=" border-t border-b border-neutral-base -mb-px">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="has-dividers-2" name="has-dividers" type="radio" value="verify" aria-describedby="has-dividers-2-item-hint">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="has-dividers-2">Sign in with Cl@ve</label>
      
      <!-- /label -->
                <!-- hint -->
      <p id="has-dividers-2-item-hint" class="block text-neutral-dark">
        You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.
      </p>
      <!-- /hint -->
              </div>
            </div>
          </div>
        </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /radios -->

with classes applied in items

How do you want to sign in?

You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.

You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.

Show code

Macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}
{{ componentRadios({
  "idPrefix": "classes",
  "name": "classes",
  "fieldset": {
    "legend": {
      "text": "How do you want to sign in?",
      "isPageHeading": true
    }
  },
  "items": [
    {
      "value": "gateway",
      "text": "Sign in with Digital Cert",
      "hint": {
        "text": "You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before."
      },
      "classes": "bg-warning-light"
    },
    {
      "value": "verify",
      "text": "Sign in with Cl@ve",
      "hint": {
        "text": "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
      },
      "classes": "bg-neutral-light"
    }
  ]
})  }}

Markup


<!-- radios -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset>
  <legend class="  font-bold">
    
      <h1>How do you want to sign in?</h1>
  </legend>
    <div x-data="{ isChecked: false }" class="c-radios">
        <div class=" bg-warning-light">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="classes" name="classes" type="radio" value="gateway" aria-describedby="classes-item-hint">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="classes">Sign in with Digital Cert</label>
      
      <!-- /label -->
                <!-- hint -->
      <p id="classes-item-hint" class="block text-neutral-dark">
        You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.
      </p>
      <!-- /hint -->
              </div>
            </div>
          </div>
        </div>
        <div class=" bg-neutral-light">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="classes-2" name="classes" type="radio" value="verify" aria-describedby="classes-2-item-hint">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="classes-2">Sign in with Cl@ve</label>
      
      <!-- /label -->
                <!-- hint -->
      <p id="classes-2-item-hint" class="block text-neutral-dark">
        You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.
      </p>
      <!-- /hint -->
              </div>
            </div>
          </div>
        </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /radios -->

without fieldset

Show code

Macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}
{{ componentRadios({
  "idPrefix": "without-fieldset",
  "name": "without-fieldset",
  "items": [
    {
      "value": "red",
      "text": "Red"
    },
    {
      "value": "green",
      "text": "Green"
    },
    {
      "value": "blue",
      "text": "Blue"
    }
  ]
})  }}

Markup


<!-- radios -->
<div class="c-form-group">
  <div x-data="{ isChecked: false }" class="c-radios">
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="without-fieldset" name="without-fieldset" type="radio" value="red">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="without-fieldset">Red</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
        </div>
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="without-fieldset-2" name="without-fieldset" type="radio" value="green">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="without-fieldset-2">Green</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
        </div>
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="without-fieldset-3" name="without-fieldset" type="radio" value="blue">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="without-fieldset-3">Blue</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
        </div>
  </div>
</div>
<!-- /radios -->

with fieldset and error message

Have you changed your name?

Error: Error: Please select an option

Show code

Macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}
{{ componentRadios({
  "idPrefix": "fieldset-and-error",
  "name": "fieldset-and-error",
  "errorMessage": {
    "text": "Error: Please select an option"
  },
  "fieldset": {
    "legend": {
      "text": "Have you changed your name?"
    }
  },
  "items": [
    {
      "value": "yes",
      "text": "Yes"
    },
    {
      "value": "no",
      "text": "No",
      "checked": true
    }
  ]
})  }}

Markup


<!-- radios -->
<div class="c-form-group c-form-group--error">
<!-- fieldset -->
<fieldset aria-describedby="fieldset-and-error-error" aria-errormessage="fieldset-and-error-error">
  <legend class="  font-bold">
    Have you changed your name?
  </legend>
    <!-- error-message -->
  <p id="fieldset-and-error-error" class="block font-semibold text-alert-base">
  <span class="sr-only">Error:</span> Error: Please select an option
  </p>
  <!-- /error-message -->
  <div x-data="{ isChecked: &quot;no&quot; }" class="c-radios">
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="fieldset-and-error" name="fieldset-and-error" type="radio" value="yes" aria-invalid="true">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="fieldset-and-error">Yes</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
        </div>
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="fieldset-and-error-2" name="fieldset-and-error" type="radio" value="no" checked aria-invalid="true">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="fieldset-and-error-2">No</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
        </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /radios -->

with very long option text

Maecenas faucibus mollis interdum?

Nullam id dolor id nibh ultricies vehicula ut id elit.

Error: Error: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show code

Macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}
{{ componentRadios({
  "idPrefix": "very-long",
  "name": "very-long",
  "hint": {
    "text": "Nullam id dolor id nibh ultricies vehicula ut id elit."
  },
  "errorMessage": {
    "text": "Error: Lorem ipsum dolor sit amet, consectetur adipiscing elit."
  },
  "fieldset": {
    "legend": {
      "text": "Maecenas faucibus mollis interdum?"
    }
  },
  "items": [
    {
      "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."
    },
    {
      "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."
    },
    {
      "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."
    }
  ]
})  }}

Markup


<!-- radios -->
<div class="c-form-group c-form-group--error">
<!-- fieldset -->
<fieldset aria-describedby="very-long-hint very-long-error" aria-errormessage="very-long-error">
  <legend class="  font-bold">
    Maecenas faucibus mollis interdum?
  </legend>
    <!-- hint -->
  <p id="very-long-hint" class="block text-neutral-dark">
    Nullam id dolor id nibh ultricies vehicula ut id elit.
  </p>
  <!-- /hint -->
  <!-- error-message -->
  <p id="very-long-error" class="block font-semibold text-alert-base">
  <span class="sr-only">Error:</span> Error: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
  <!-- /error-message -->
  <div x-data="{ isChecked: false }" class="c-radios">
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="very-long" name="very-long" type="radio" value="nullam" aria-invalid="true">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="very-long">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.</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
        </div>
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="very-long-2" name="very-long" type="radio" value="aenean" aria-invalid="true">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="very-long-2">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.</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
        </div>
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="very-long-3" name="very-long" type="radio" value="fusce" aria-invalid="true">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="very-long-3">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.</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
        </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /radios -->

with conditional items

How do you want to be contacted?
Show code

Macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}
{{ componentRadios({
  "idPrefix": "conditional-items",
  "name": "conditional-items",
  "fieldset": {
    "legend": {
      "text": "How do you want to be contacted?"
    }
  },
  "items": [
    {
      "value": "email",
      "text": "Email",
      "conditional": {
        "html": "<label class=\" block font-semibold \" for=\"context-email\">Mobile phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
      }
    },
    {
      "value": "phone",
      "text": "Phone",
      "conditional": {
        "html": "<label class=\" block font-semibold \" for=\"contact-phone\">Phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
      }
    },
    {
      "value": "text",
      "text": "Text message",
      "conditional": {
        "html": "<label class=\" block font-semibold \" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
      }
    }
  ]
})  }}

Markup


<!-- radios -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset>
  <legend class="  font-bold">
    How do you want to be contacted?
  </legend>
    <div x-data="{ isChecked: false }" class="c-radios">
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="conditional-items" name="conditional-items" type="radio" value="email" data-aria-controls="conditional-conditional-items">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="conditional-items">Email</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
          <div  x-show="isChecked.toString() == 'email'"
                x-transition:enter="transition ease-out duration-100 transform"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                class="mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base" id="conditional-conditional-items">
            <label class=" block font-semibold " for="context-email">Mobile phone number</label>
<input class=" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base " name="context-email" type="text" id="context-email">

          </div>
        </div>
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="conditional-items-2" name="conditional-items" type="radio" value="phone" data-aria-controls="conditional-conditional-items-2">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="conditional-items-2">Phone</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
          <div  x-show="isChecked.toString() == 'phone'"
                x-transition:enter="transition ease-out duration-100 transform"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                class="mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base" id="conditional-conditional-items-2">
            <label class=" block font-semibold " for="contact-phone">Phone number</label>
<input class=" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base " name="contact-phone" type="text" id="contact-phone">

          </div>
        </div>
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="conditional-items-3" name="conditional-items" type="radio" value="text" data-aria-controls="conditional-conditional-items-3">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="conditional-items-3">Text message</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
          <div  x-show="isChecked.toString() == 'text'"
                x-transition:enter="transition ease-out duration-100 transform"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                class="mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base" id="conditional-conditional-items-3">
            <label class=" block font-semibold " for="contact-text-message">Mobile phone number</label>
<input class=" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base " name="contact-text-message" type="text" id="contact-text-message">

          </div>
        </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /radios -->

inline with conditional items

How do you want to be contacted?
Show code

Macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}
{{ componentRadios({
  "classes": "flex",
  "idPrefix": "inline-with-conditional",
  "name": "inline-with-conditional",
  "fieldset": {
    "legend": {
      "text": "How do you want to be contacted?"
    }
  },
  "items": [
    {
      "value": "email",
      "text": "Email",
      "classes": "mr-sm",
      "conditional": {
        "html": "<label class=\" block font-semibold \" for=\"context-email\">Mobile phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
      }
    },
    {
      "value": "phone",
      "text": "Phone",
      "classes": "mr-sm",
      "conditional": {
        "html": "<label class=\" block font-semibold \" for=\"contact-phone\">Phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
      }
    },
    {
      "value": "text",
      "text": "Text message",
      "classes": "mr-sm",
      "conditional": {
        "html": "<label class=\" block font-semibold \" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
      }
    }
  ]
})  }}

Markup


<!-- radios -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset>
  <legend class="  font-bold">
    How do you want to be contacted?
  </legend>
    <div x-data="{ isChecked: false }" class="c-radios flex">
        <div class=" mr-sm">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="inline-with-conditional" name="inline-with-conditional" type="radio" value="email" data-aria-controls="conditional-inline-with-conditional">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="inline-with-conditional">Email</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
          <div  x-show="isChecked.toString() == 'email'"
                x-transition:enter="transition ease-out duration-100 transform"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                class="mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base" id="conditional-inline-with-conditional">
            <label class=" block font-semibold " for="context-email">Mobile phone number</label>
<input class=" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base " name="context-email" type="text" id="context-email">

          </div>
        </div>
        <div class=" mr-sm">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="inline-with-conditional-2" name="inline-with-conditional" type="radio" value="phone" data-aria-controls="conditional-inline-with-conditional-2">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="inline-with-conditional-2">Phone</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
          <div  x-show="isChecked.toString() == 'phone'"
                x-transition:enter="transition ease-out duration-100 transform"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                class="mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base" id="conditional-inline-with-conditional-2">
            <label class=" block font-semibold " for="contact-phone">Phone number</label>
<input class=" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base " name="contact-phone" type="text" id="contact-phone">

          </div>
        </div>
        <div class=" mr-sm">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="inline-with-conditional-3" name="inline-with-conditional" type="radio" value="text" data-aria-controls="conditional-inline-with-conditional-3">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="inline-with-conditional-3">Text message</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
          <div  x-show="isChecked.toString() == 'text'"
                x-transition:enter="transition ease-out duration-100 transform"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                class="mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base" id="conditional-inline-with-conditional-3">
            <label class=" block font-semibold " for="contact-text-message">Mobile phone number</label>
<input class=" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base " name="contact-text-message" type="text" id="contact-text-message">

          </div>
        </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /radios -->

with conditional item checked

How do you want to be contacted?
Show code

Macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}
{{ componentRadios({
  "idPrefix": "conditional-item-checked",
  "name": "conditional-item-checked",
  "fieldset": {
    "legend": {
      "text": "How do you want to be contacted?"
    }
  },
  "items": [
    {
      "value": "email",
      "text": "Email",
      "conditional": {
        "html": "<label class=\" block font-semibold \" for=\"context-email\">Mobile phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
      }
    },
    {
      "value": "phone",
      "text": "Phone",
      "checked": true,
      "conditional": {
        "html": "<label class=\" block font-semibold \" for=\"contact-phone\">Phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
      }
    },
    {
      "value": "text",
      "text": "Text message",
      "conditional": {
        "html": "<label class=\" block font-semibold \" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
      }
    }
  ]
})  }}

Markup


<!-- radios -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset>
  <legend class="  font-bold">
    How do you want to be contacted?
  </legend>
    <div x-data="{ isChecked: &quot;phone&quot; }" class="c-radios">
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="conditional-item-checked" name="conditional-item-checked" type="radio" value="email" data-aria-controls="conditional-conditional-item-checked">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="conditional-item-checked">Email</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
          <div  x-show="isChecked.toString() == 'email'"
                x-transition:enter="transition ease-out duration-100 transform"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                class="mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base" id="conditional-conditional-item-checked">
            <label class=" block font-semibold " for="context-email">Mobile phone number</label>
<input class=" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base " name="context-email" type="text" id="context-email">

          </div>
        </div>
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="conditional-item-checked-2" name="conditional-item-checked" type="radio" value="phone" checked data-aria-controls="conditional-conditional-item-checked-2">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="conditional-item-checked-2">Phone</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
          <div  x-show="isChecked.toString() == 'phone'"
                x-transition:enter="transition ease-out duration-100 transform"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                class="mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base" id="conditional-conditional-item-checked-2">
            <label class=" block font-semibold " for="contact-phone">Phone number</label>
<input class=" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base " name="contact-phone" type="text" id="contact-phone">

          </div>
        </div>
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="conditional-item-checked-3" name="conditional-item-checked" type="radio" value="text" data-aria-controls="conditional-conditional-item-checked-3">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="conditional-item-checked-3">Text message</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
          <div  x-show="isChecked.toString() == 'text'"
                x-transition:enter="transition ease-out duration-100 transform"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                class="mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base" id="conditional-conditional-item-checked-3">
            <label class=" block font-semibold " for="contact-text-message">Mobile phone number</label>
<input class=" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base " name="contact-text-message" type="text" id="contact-text-message">

          </div>
        </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /radios -->

with optional form-group classes showing group error

How do you want to be contacted?
Error: Problem with input
Show code

Macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}
{{ componentRadios({
  "idPrefix": "classes-group-error",
  "name": "classes-group-error",
  "formGroup": {
    "classes": "c-form-group--error"
  },
  "fieldset": {
    "legend": {
      "text": "How do you want to be contacted?"
    }
  },
  "items": [
    {
      "value": "email",
      "text": "Email",
      "conditional": {
        "html": "<label class=\" block font-semibold \" for=\"context-email\">Mobile phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
      }
    },
    {
      "value": "phone",
      "text": "Phone",
      "checked": true,
      "conditional": {
        "html": "<label class=\" block font-semibold \" for=\"contact-phone\">Phone number</label>\n<span id=\"contact-phone-error\" class=\" block font-semibold text-alert-base\">Error: Problem with input</span>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base border-alert-base ring-2 ring-alert-base\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\" aria-errormessage=\"contact-phone-error\">\n"
      }
    },
    {
      "value": "text",
      "text": "Text message",
      "conditional": {
        "html": "<label class=\" block font-semibold \" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
      }
    }
  ]
})  }}

Markup


<!-- radios -->
<div class="c-form-group c-form-group--error">
<!-- fieldset -->
<fieldset>
  <legend class="  font-bold">
    How do you want to be contacted?
  </legend>
    <div x-data="{ isChecked: &quot;phone&quot; }" class="c-radios">
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="classes-group-error" name="classes-group-error" type="radio" value="email" data-aria-controls="conditional-classes-group-error">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="classes-group-error">Email</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
          <div  x-show="isChecked.toString() == 'email'"
                x-transition:enter="transition ease-out duration-100 transform"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                class="mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base" id="conditional-classes-group-error">
            <label class=" block font-semibold " for="context-email">Mobile phone number</label>
<input class=" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base " name="context-email" type="text" id="context-email">

          </div>
        </div>
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="classes-group-error-2" name="classes-group-error" type="radio" value="phone" checked data-aria-controls="conditional-classes-group-error-2">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="classes-group-error-2">Phone</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
          <div  x-show="isChecked.toString() == 'phone'"
                x-transition:enter="transition ease-out duration-100 transform"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                class="mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base" id="conditional-classes-group-error-2">
            <label class=" block font-semibold " for="contact-phone">Phone number</label>
<span id="contact-phone-error" class=" block font-semibold text-alert-base">Error: Problem with input</span>
<input class=" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base border-alert-base ring-2 ring-alert-base" name="contact-phone" type="text" id="contact-phone" aria-errormessage="contact-phone-error">

          </div>
        </div>
        <div class="">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="classes-group-error-3" name="classes-group-error" type="radio" value="text" data-aria-controls="conditional-classes-group-error-3">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block" for="classes-group-error-3">Text message</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
          <div  x-show="isChecked.toString() == 'text'"
                x-transition:enter="transition ease-out duration-100 transform"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                class="mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base" id="conditional-classes-group-error-3">
            <label class=" block font-semibold " for="contact-text-message">Mobile phone number</label>
<input class=" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base " name="contact-text-message" type="text" id="contact-text-message">

          </div>
        </div>
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /radios -->

small

Show code

Macro

{% from "components/radios/_macro.radios.njk" import componentRadios %}
{{ componentRadios({
  "idPrefix": "small",
  "name": "small",
  "classes": "c-radios--sm",
  "items": [
    {
      "value": "yes",
      "text": "Yes",
      "classes": "-mt-base",
      "label": {
        "classes": "text-sm -mt-1"
      }
    },
    {
      "value": "no",
      "text": "No",
      "classes": "-mt-base",
      "label": {
        "classes": "text-sm -mt-1"
      }
    }
  ]
})  }}

Markup


<!-- radios -->
<div class="c-form-group">
  <div x-data="{ isChecked: false }" class="c-radios c-radios--sm">
        <div class=" -mt-base">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="small" name="small" type="radio" value="yes">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block text-sm -mt-1" for="small">Yes</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
        </div>
        <div class=" -mt-base">          <div>
            <div class="relative flex items-start py-base">
              <div class="flex items-center mx-sm">
                <input x-model="isChecked" class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="small-2" name="small" type="radio" value="no">
              </div>
              <div class="pt-0.5 leading-5">
                <!-- label -->
      <label class="block text-sm -mt-1" for="small-2">No</label>
      
      <!-- /label -->
              </div>
            </div>
          </div>
        </div>
  </div>
</div>
<!-- /radios -->