Skip to main content Skip to list of components
Service phase: Beta

This is a new service – give us your feedback to help improve it.

Components

Radios

Radios allow users to select a single options for a form field.

Contents

  1. Component status
  2. Small
  3. Preselected
  4. Hints
  5. Error
  6. Inline
Open this example in new tab

HTML 

<div class="tna-fieldset tna-fieldset--small-hint">
  <fieldset class="tna-fieldset__inner">
    <legend class="tna-fieldset__legend">
      <h4 class="tna-fieldset__heading tna-heading-m">
        Type
      </h4>
    </legend>
    <div class="tna-fieldset__body">
      <div class="tna-radios" id="type">
        <div class="tna-radios__item">
          <input type="radio" id="type-audio" value="audio" name="type">
          <label for="type-audio" class="tna-radios__item-label">
            Audio
          </label>
        </div>
        <div class="tna-radios__item">
          <input type="radio" id="type-image" value="image" name="type">
          <label for="type-image" class="tna-radios__item-label">
            Image
          </label>
        </div>
        <div class="tna-radios__item">
          <input type="radio" id="type-video" value="video" name="type">
          <label for="type-video" class="tna-radios__item-label">
            Video
          </label>
        </div>
      </div>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the radios field.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Leave blank or set to 0 to use a plain <label> element with no heading.
headingSize string

The physical size of the radios title (xl, l, m, s or xs).

Default value: m
id string

Required.

A unique ID for the radios component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
error object

If set, the details of any errors.

See macro options for error.
items array

Required.

A list of radio items.

See macro options for items.
selected string

Set the value of the initial selected item.
small boolean

If true, show smaller radios.
inline boolean

If true, show the radios inline rather than vertical.
formItemClasses string

Classes to add to the radios form group.
formItemAttributes object

HTML attributes (for example data attributes) to add to the radios form group.
fieldsetClasses string

Classes to add to the <fieldset> element.
fieldsetAttributes object

HTML attributes (for example data attributes) to add to the <fieldset> element.
classes string

Classes to add to the radio elements.
attributes object

HTML attributes (for example data attributes) to add to the radio elements.
Options for error
Name Type Description
text string

Required.

The error text to display.
Options for items
Name Type Description
text string

Required.

The text of the radio item.
value string

Required.

The form field value.
hint string

An extra hint to display inside the checkbox item.

 
{% from "nationalarchives/components/radios/macro.njk" import tnaRadios %}

{{ tnaRadios({
  label: "Type",
  headingLevel: 4,
  headingSize: "m",
  id: "type",
  name: "type",
  items: [
    {
      text: "Audio",
      value: "audio"
    },
    {
      text: "Image",
      value: "image"
    },
    {
      text: "Video",
      value: "video"
    }
  ]
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/radios/macro.html" import tnaRadios %}

{{ tnaRadios({
  "label": "Type",
  "headingLevel": 4,
  "headingSize": "m",
  "id": "type",
  "name": "type",
  "items": [
    {
      "text": "Audio",
      "value": "audio"
    },
    {
      "text": "Image",
      "value": "image"
    },
    {
      "text": "Video",
      "value": "video"
    }
  ]
}) }}

Component status

Phase
Official (ready to use in production)

Small

Open this example in new tab

HTML 

<div class="tna-fieldset tna-fieldset--small-hint">
  <fieldset class="tna-fieldset__inner">
    <legend class="tna-fieldset__legend">
      <h4 class="tna-fieldset__heading tna-heading-m">
        Type
      </h4>
    </legend>
    <div class="tna-fieldset__body">
      <div class="tna-radios tna-radios--small" id="type">
        <div class="tna-radios__item">
          <input type="radio" id="type-ADM" value="ADM" name="type">
          <label for="type-ADM" class="tna-radios__item-label">
            Admiralty, Navy, Royal Marines, and Coastguard
          </label>
        </div>
        <div class="tna-radios__item">
          <input type="radio" id="type-AIR" value="AIR" name="type">
          <label for="type-AIR" class="tna-radios__item-label">
            Air Ministry and Royal Air Force records
          </label>
        </div>
        <div class="tna-radios__item">
          <input type="radio" id="type-BT" value="BT" name="type">
          <label for="type-BT" class="tna-radios__item-label">
            Board of Trade and successors
          </label>
        </div>
        <div class="tna-radios__item">
          <input type="radio" id="type-C" value="C" name="type">
          <label for="type-C" class="tna-radios__item-label">
            Chancery, the Wardrobe, Royal Household, Exchequer and various commissions
          </label>
        </div>
        <div class="tna-radios__item">
          <input type="radio" id="type-CO" value="CO" name="type">
          <label for="type-CO" class="tna-radios__item-label">
            Colonial Office, Commonwealth and Foreign and Commonwealth Offices
          </label>
        </div>
        <div class="tna-radios__item">
          <input type="radio" id="type-E" value="E" name="type">
          <label for="type-E" class="tna-radios__item-label">
            Exchequer, Office of First Fruits and Tenths, and the Court of Augmentations
          </label>
        </div>
        <div class="tna-radios__item">
          <input type="radio" id="type-FO" value="FO" name="type">
          <label for="type-FO" class="tna-radios__item-label">
            Foreign Office
          </label>
        </div>
        <div class="tna-radios__item">
          <input type="radio" id="type-HO" value="HO" name="type">
          <label for="type-HO" class="tna-radios__item-label">
            Home Office
          </label>
        </div>
        <div class="tna-radios__item">
          <input type="radio" id="type-PROB" value="PROB" name="type">
          <label for="type-PROB" class="tna-radios__item-label">
            Prerogative Court of Canterbury
          </label>
        </div>
      </div>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the radios field.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Leave blank or set to 0 to use a plain <label> element with no heading.
headingSize string

The physical size of the radios title (xl, l, m, s or xs).

Default value: m
id string

Required.

A unique ID for the radios component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
error object

If set, the details of any errors.

See macro options for error.
items array

Required.

A list of radio items.

See macro options for items.
selected string

Set the value of the initial selected item.
small boolean

If true, show smaller radios.
inline boolean

If true, show the radios inline rather than vertical.
formItemClasses string

Classes to add to the radios form group.
formItemAttributes object

HTML attributes (for example data attributes) to add to the radios form group.
fieldsetClasses string

Classes to add to the <fieldset> element.
fieldsetAttributes object

HTML attributes (for example data attributes) to add to the <fieldset> element.
classes string

Classes to add to the radio elements.
attributes object

HTML attributes (for example data attributes) to add to the radio elements.
Options for error
Name Type Description
text string

Required.

The error text to display.
Options for items
Name Type Description
text string

Required.

The text of the radio item.
value string

Required.

The form field value.
hint string

An extra hint to display inside the checkbox item.

 
{% from "nationalarchives/components/radios/macro.njk" import tnaRadios %}

{{ tnaRadios({
  label: "Type",
  headingLevel: 4,
  headingSize: "m",
  id: "type",
  name: "type",
  items: [
    {
      text: "Admiralty, Navy, Royal Marines, and Coastguard",
      value: "ADM"
    },
    {
      text: "Air Ministry and Royal Air Force records",
      value: "AIR"
    },
    {
      text: "Board of Trade and successors",
      value: "BT"
    },
    {
      text: "Chancery, the Wardrobe, Royal Household, Exchequer and various commissions",
      value: "C"
    },
    {
      text: "Colonial Office, Commonwealth and Foreign and Commonwealth Offices",
      value: "CO"
    },
    {
      text: "Exchequer, Office of First Fruits and Tenths, and the Court of Augmentations",
      value: "E"
    },
    {
      text: "Foreign Office",
      value: "FO"
    },
    {
      text: "Home Office",
      value: "HO"
    },
    {
      text: "Prerogative Court of Canterbury",
      value: "PROB"
    }
  ],
  small: true
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/radios/macro.html" import tnaRadios %}

{{ tnaRadios({
  "label": "Type",
  "headingLevel": 4,
  "headingSize": "m",
  "id": "type",
  "name": "type",
  "items": [
    {
      "text": "Admiralty, Navy, Royal Marines, and Coastguard",
      "value": "ADM"
    },
    {
      "text": "Air Ministry and Royal Air Force records",
      "value": "AIR"
    },
    {
      "text": "Board of Trade and successors",
      "value": "BT"
    },
    {
      "text": "Chancery, the Wardrobe, Royal Household, Exchequer and various commissions",
      "value": "C"
    },
    {
      "text": "Colonial Office, Commonwealth and Foreign and Commonwealth Offices",
      "value": "CO"
    },
    {
      "text": "Exchequer, Office of First Fruits and Tenths, and the Court of Augmentations",
      "value": "E"
    },
    {
      "text": "Foreign Office",
      "value": "FO"
    },
    {
      "text": "Home Office",
      "value": "HO"
    },
    {
      "text": "Prerogative Court of Canterbury",
      "value": "PROB"
    }
  ],
  "small": True
}) }}

Preselected

Open this example in new tab

HTML 

<div class="tna-fieldset tna-fieldset--small-hint">
  <fieldset class="tna-fieldset__inner">
    <legend class="tna-fieldset__legend">
      <h4 class="tna-fieldset__heading tna-heading-m">
        Type
      </h4>
    </legend>
    <div class="tna-fieldset__body">
      <div class="tna-radios" id="type">
        <div class="tna-radios__item">
          <input type="radio" id="type-audio" value="audio" name="type">
          <label for="type-audio" class="tna-radios__item-label">
            Audio
          </label>
        </div>
        <div class="tna-radios__item">
          <input type="radio" id="type-image" value="image" name="type" checked>
          <label for="type-image" class="tna-radios__item-label">
            Image
          </label>
        </div>
        <div class="tna-radios__item">
          <input type="radio" id="type-video" value="video" name="type">
          <label for="type-video" class="tna-radios__item-label">
            Video
          </label>
        </div>
      </div>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the radios field.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Leave blank or set to 0 to use a plain <label> element with no heading.
headingSize string

The physical size of the radios title (xl, l, m, s or xs).

Default value: m
id string

Required.

A unique ID for the radios component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
error object

If set, the details of any errors.

See macro options for error.
items array

Required.

A list of radio items.

See macro options for items.
selected string

Set the value of the initial selected item.
small boolean

If true, show smaller radios.
inline boolean

If true, show the radios inline rather than vertical.
formItemClasses string

Classes to add to the radios form group.
formItemAttributes object

HTML attributes (for example data attributes) to add to the radios form group.
fieldsetClasses string

Classes to add to the <fieldset> element.
fieldsetAttributes object

HTML attributes (for example data attributes) to add to the <fieldset> element.
classes string

Classes to add to the radio elements.
attributes object

HTML attributes (for example data attributes) to add to the radio elements.
Options for error
Name Type Description
text string

Required.

The error text to display.
Options for items
Name Type Description
text string

Required.

The text of the radio item.
value string

Required.

The form field value.
hint string

An extra hint to display inside the checkbox item.

 
{% from "nationalarchives/components/radios/macro.njk" import tnaRadios %}

{{ tnaRadios({
  label: "Type",
  headingLevel: 4,
  headingSize: "m",
  id: "type",
  name: "type",
  items: [
    {
      text: "Audio",
      value: "audio"
    },
    {
      text: "Image",
      value: "image"
    },
    {
      text: "Video",
      value: "video"
    }
  ],
  selected: "image"
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/radios/macro.html" import tnaRadios %}

{{ tnaRadios({
  "label": "Type",
  "headingLevel": 4,
  "headingSize": "m",
  "id": "type",
  "name": "type",
  "items": [
    {
      "text": "Audio",
      "value": "audio"
    },
    {
      "text": "Image",
      "value": "image"
    },
    {
      "text": "Video",
      "value": "video"
    }
  ],
  "selected": "image"
}) }}

Hints

Open this example in new tab

HTML 

<div class="tna-fieldset tna-fieldset--small-hint">
  <fieldset class="tna-fieldset__inner" aria-describedby="type-hint">
    <legend class="tna-fieldset__legend">
      <h4 class="tna-fieldset__heading tna-heading-m">
        Type
      </h4>
    </legend>
    <p id="type-hint" class="tna-fieldset__hint">
      You can only select one.
    </p>
    <div class="tna-fieldset__body">
      <div class="tna-radios" id="type">
        <div class="tna-radios__item">
          <input type="radio" id="type-audio" value="audio" name="type">
          <label for="type-audio" class="tna-radios__item-label">
            Audio
          </label>
        </div>
        <div class="tna-radios__item">
          <input type="radio" id="type-image" value="image" name="type">
          <label for="type-image" class="tna-radios__item-label">
            Image
          </label>
        </div>
        <div class="tna-radios__item">
          <input type="radio" id="type-video" value="video" name="type">
          <label for="type-video" class="tna-radios__item-label">
            Video
          </label>
        </div>
      </div>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the radios field.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Leave blank or set to 0 to use a plain <label> element with no heading.
headingSize string

The physical size of the radios title (xl, l, m, s or xs).

Default value: m
id string

Required.

A unique ID for the radios component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
error object

If set, the details of any errors.

See macro options for error.
items array

Required.

A list of radio items.

See macro options for items.
selected string

Set the value of the initial selected item.
small boolean

If true, show smaller radios.
inline boolean

If true, show the radios inline rather than vertical.
formItemClasses string

Classes to add to the radios form group.
formItemAttributes object

HTML attributes (for example data attributes) to add to the radios form group.
fieldsetClasses string

Classes to add to the <fieldset> element.
fieldsetAttributes object

HTML attributes (for example data attributes) to add to the <fieldset> element.
classes string

Classes to add to the radio elements.
attributes object

HTML attributes (for example data attributes) to add to the radio elements.
Options for error
Name Type Description
text string

Required.

The error text to display.
Options for items
Name Type Description
text string

Required.

The text of the radio item.
value string

Required.

The form field value.
hint string

An extra hint to display inside the checkbox item.

 
{% from "nationalarchives/components/radios/macro.njk" import tnaRadios %}

{{ tnaRadios({
  label: "Type",
  headingLevel: 4,
  headingSize: "m",
  id: "type",
  name: "type",
  hint: "You can only select one.",
  items: [
    {
      text: "Audio",
      value: "audio"
    },
    {
      text: "Image",
      value: "image"
    },
    {
      text: "Video",
      value: "video"
    }
  ]
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/radios/macro.html" import tnaRadios %}

{{ tnaRadios({
  "label": "Type",
  "headingLevel": 4,
  "headingSize": "m",
  "id": "type",
  "name": "type",
  "hint": "You can only select one.",
  "items": [
    {
      "text": "Audio",
      "value": "audio"
    },
    {
      "text": "Image",
      "value": "image"
    },
    {
      "text": "Video",
      "value": "video"
    }
  ]
}) }}

Item hints

Do not add item hints to small radios or inline radios.

Open this example in new tab

HTML 

<div class="tna-fieldset tna-fieldset--small-hint">
  <fieldset class="tna-fieldset__inner">
    <legend class="tna-fieldset__legend">
      <h4 class="tna-fieldset__heading tna-heading-m">
        Type
      </h4>
    </legend>
    <div class="tna-fieldset__body">
      <div class="tna-radios" id="type">
        <div class="tna-radios__item">
          <input type="radio" id="type-audio" value="audio" name="type">
          <label for="type-audio" class="tna-radios__item-label">
            Audio
            <span class="tna-radios__item-hint"><span class="tna-visually-hidden">(</span>This is additional information about Audio.<span class="tna-visually-hidden">)</span></span>
          </label>
        </div>
        <div class="tna-radios__item">
          <input type="radio" id="type-image" value="image" name="type">
          <label for="type-image" class="tna-radios__item-label">
            Image
            <span class="tna-radios__item-hint"><span class="tna-visually-hidden">(</span>This is additional information about Image.<span class="tna-visually-hidden">)</span></span>
          </label>
        </div>
        <div class="tna-radios__item">
          <input type="radio" id="type-video" value="video" name="type">
          <label for="type-video" class="tna-radios__item-label">
            Video
            <span class="tna-radios__item-hint"><span class="tna-visually-hidden">(</span>This is additional information about Video.<span class="tna-visually-hidden">)</span></span>
          </label>
        </div>
      </div>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the radios field.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Leave blank or set to 0 to use a plain <label> element with no heading.
headingSize string

The physical size of the radios title (xl, l, m, s or xs).

Default value: m
id string

Required.

A unique ID for the radios component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
error object

If set, the details of any errors.

See macro options for error.
items array

Required.

A list of radio items.

See macro options for items.
selected string

Set the value of the initial selected item.
small boolean

If true, show smaller radios.
inline boolean

If true, show the radios inline rather than vertical.
formItemClasses string

Classes to add to the radios form group.
formItemAttributes object

HTML attributes (for example data attributes) to add to the radios form group.
fieldsetClasses string

Classes to add to the <fieldset> element.
fieldsetAttributes object

HTML attributes (for example data attributes) to add to the <fieldset> element.
classes string

Classes to add to the radio elements.
attributes object

HTML attributes (for example data attributes) to add to the radio elements.
Options for error
Name Type Description
text string

Required.

The error text to display.
Options for items
Name Type Description
text string

Required.

The text of the radio item.
value string

Required.

The form field value.
hint string

An extra hint to display inside the checkbox item.

 
{% from "nationalarchives/components/radios/macro.njk" import tnaRadios %}

{{ tnaRadios({
  label: "Type",
  headingLevel: 4,
  headingSize: "m",
  id: "type",
  name: "type",
  items: [
    {
      text: "Audio",
      value: "audio",
      hint: "This is additional information about Audio."
    },
    {
      text: "Image",
      value: "image",
      hint: "This is additional information about Image."
    },
    {
      text: "Video",
      value: "video",
      hint: "This is additional information about Video."
    }
  ]
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/radios/macro.html" import tnaRadios %}

{{ tnaRadios({
  "label": "Type",
  "headingLevel": 4,
  "headingSize": "m",
  "id": "type",
  "name": "type",
  "items": [
    {
      "text": "Audio",
      "value": "audio",
      "hint": "This is additional information about Audio."
    },
    {
      "text": "Image",
      "value": "image",
      "hint": "This is additional information about Image."
    },
    {
      "text": "Video",
      "value": "video",
      "hint": "This is additional information about Video."
    }
  ]
}) }}

Error

Open this example in new tab

HTML 

<div class="tna-fieldset tna-fieldset--small-hint tna-fieldset--error">
  <fieldset class="tna-fieldset__inner" aria-describedby="type-error">
    <legend class="tna-fieldset__legend">
      <h4 class="tna-fieldset__heading tna-heading-m">
        Type
      </h4>
    </legend>
    <p id="type-error" class="tna-fieldset__error">
      <span class="tna-!--visually-hidden">Error:</span> You must select a type
    </p>
    <div class="tna-fieldset__body">
      <div class="tna-radios" id="type">
        <div class="tna-radios__item">
          <input type="radio" id="type-audio" value="audio" name="type">
          <label for="type-audio" class="tna-radios__item-label">
            Audio
          </label>
        </div>
        <div class="tna-radios__item">
          <input type="radio" id="type-image" value="image" name="type">
          <label for="type-image" class="tna-radios__item-label">
            Image
          </label>
        </div>
        <div class="tna-radios__item">
          <input type="radio" id="type-video" value="video" name="type">
          <label for="type-video" class="tna-radios__item-label">
            Video
          </label>
        </div>
      </div>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the radios field.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Leave blank or set to 0 to use a plain <label> element with no heading.
headingSize string

The physical size of the radios title (xl, l, m, s or xs).

Default value: m
id string

Required.

A unique ID for the radios component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
error object

If set, the details of any errors.

See macro options for error.
items array

Required.

A list of radio items.

See macro options for items.
selected string

Set the value of the initial selected item.
small boolean

If true, show smaller radios.
inline boolean

If true, show the radios inline rather than vertical.
formItemClasses string

Classes to add to the radios form group.
formItemAttributes object

HTML attributes (for example data attributes) to add to the radios form group.
fieldsetClasses string

Classes to add to the <fieldset> element.
fieldsetAttributes object

HTML attributes (for example data attributes) to add to the <fieldset> element.
classes string

Classes to add to the radio elements.
attributes object

HTML attributes (for example data attributes) to add to the radio elements.
Options for error
Name Type Description
text string

Required.

The error text to display.
Options for items
Name Type Description
text string

Required.

The text of the radio item.
value string

Required.

The form field value.
hint string

An extra hint to display inside the checkbox item.

 
{% from "nationalarchives/components/radios/macro.njk" import tnaRadios %}

{{ tnaRadios({
  label: "Type",
  headingLevel: 4,
  headingSize: "m",
  id: "type",
  name: "type",
  error: {
    text: "You must select a type"
  },
  items: [
    {
      text: "Audio",
      value: "audio"
    },
    {
      text: "Image",
      value: "image"
    },
    {
      text: "Video",
      value: "video"
    }
  ]
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/radios/macro.html" import tnaRadios %}

{{ tnaRadios({
  "label": "Type",
  "headingLevel": 4,
  "headingSize": "m",
  "id": "type",
  "name": "type",
  "error": {
    "text": "You must select a type"
  },
  "items": [
    {
      "text": "Audio",
      "value": "audio"
    },
    {
      "text": "Image",
      "value": "image"
    },
    {
      "text": "Video",
      "value": "video"
    }
  ]
}) }}

Inline

Open this example in new tab

HTML 

<div class="tna-fieldset tna-fieldset--small-hint">
  <fieldset class="tna-fieldset__inner">
    <legend class="tna-fieldset__legend">
      <h4 class="tna-fieldset__heading tna-heading-m">
        Type
      </h4>
    </legend>
    <div class="tna-fieldset__body">
      <div class="tna-radios tna-radios--small tna-radios--inline" id="type">
        <div class="tna-radios__item">
          <input type="radio" id="type-audio" value="audio" name="type">
          <label for="type-audio" class="tna-radios__item-label">
            Audio
          </label>
        </div>
        <div class="tna-radios__item">
          <input type="radio" id="type-image" value="image" name="type">
          <label for="type-image" class="tna-radios__item-label">
            Image
          </label>
        </div>
        <div class="tna-radios__item">
          <input type="radio" id="type-video" value="video" name="type">
          <label for="type-video" class="tna-radios__item-label">
            Video
          </label>
        </div>
      </div>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

The label for the radios field.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Leave blank or set to 0 to use a plain <label> element with no heading.
headingSize string

The physical size of the radios title (xl, l, m, s or xs).

Default value: m
id string

Required.

A unique ID for the radios component.
name string

Required.

The name of the form field.
hint string

An optional hint to display above the form field.
error object

If set, the details of any errors.

See macro options for error.
items array

Required.

A list of radio items.

See macro options for items.
selected string

Set the value of the initial selected item.
small boolean

If true, show smaller radios.
inline boolean

If true, show the radios inline rather than vertical.
formItemClasses string

Classes to add to the radios form group.
formItemAttributes object

HTML attributes (for example data attributes) to add to the radios form group.
fieldsetClasses string

Classes to add to the <fieldset> element.
fieldsetAttributes object

HTML attributes (for example data attributes) to add to the <fieldset> element.
classes string

Classes to add to the radio elements.
attributes object

HTML attributes (for example data attributes) to add to the radio elements.
Options for error
Name Type Description
text string

Required.

The error text to display.
Options for items
Name Type Description
text string

Required.

The text of the radio item.
value string

Required.

The form field value.
hint string

An extra hint to display inside the checkbox item.

 
{% from "nationalarchives/components/radios/macro.njk" import tnaRadios %}

{{ tnaRadios({
  label: "Type",
  headingLevel: 4,
  headingSize: "m",
  id: "type",
  name: "type",
  items: [
    {
      text: "Audio",
      value: "audio"
    },
    {
      text: "Image",
      value: "image"
    },
    {
      text: "Video",
      value: "video"
    }
  ],
  inline: true
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/radios/macro.html" import tnaRadios %}

{{ tnaRadios({
  "label": "Type",
  "headingLevel": 4,
  "headingSize": "m",
  "id": "type",
  "name": "type",
  "items": [
    {
      "text": "Audio",
      "value": "audio"
    },
    {
      "text": "Image",
      "value": "image"
    },
    {
      "text": "Video",
      "value": "video"
    }
  ],
  "inline": True
}) }}

Back to top