Skip to main content Skip to list of components
Beta

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

Components

Checkboxes

Checkboxes allow users to post multiple options for the same field.

Contents

  1. Status
  2. Small
  3. Preselected
  4. Hint
  5. Error
  6. Inline

Checkboxes allow users to post multiple options for the same field.

Open this example in new tab

HTML 

<div class="tna-form__group">
  <fieldset class="tna-form__fieldset">
    <legend class="tna-form__legend">
      <h4 class="tna-form__heading tna-form__heading--m">
        Categories
      </h4>
    </legend>
    <div class="tna-checkboxes" id="categories">
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-alpha" value="alpha" name="categories">
        <label for="categories-alpha" class="tna-checkboxes__item-label">
          Alpha
        </label>
      </div>
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-beta" value="beta" name="categories">
        <label for="categories-beta" class="tna-checkboxes__item-label">
          Beta
        </label>
      </div>
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-gamma" value="gamma" name="categories">
        <label for="categories-gamma" class="tna-checkboxes__item-label">
          Gamma
        </label>
      </div>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

headingLevel number

Required.

headingSize string
id string

Required.

name string

Required.

hint string
error object

See error.
items array

Required.

See items.
small boolean
inline boolean
formGroupClasses string

Classes to add to the checkboxes form group.
formGroupAttributes string

HTML attributes (for example data attributes) to add to the checkboxes form group.
classes string

Classes to add to the checkbox elements.
attributes object

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

Required.

Options for items
Name Type Description
text string

Required.

value string

Required.

name string
checked boolean 
{% from "nationalarchives/components/checkboxes/macro.njk" import tnaCheckboxes %}

{{ tnaCheckboxes({
  label: "Categories",
  headingLevel: 4,
  headingSize: "m",
  id: "categories",
  name: "categories",
  items: [
    {
      text: "Alpha",
      value: "alpha"
    },
    {
      text: "Beta",
      value: "beta"
    },
    {
      text: "Gamma",
      value: "gamma"
    }
  ]
}) }}

Status

Status
In development
Tested without CSS
Yes
WCAG 2.2 AA compliant
In development
Analytics integrated
In development
Documentation complete
No

Small

Open this example in new tab

HTML 

<div class="tna-form__group">
  <fieldset class="tna-form__fieldset">
    <legend class="tna-form__legend">
      <h4 class="tna-form__heading tna-form__heading--m">
        Categories
      </h4>
    </legend>
    <div class="tna-checkboxes tna-checkboxes--small" id="categories">
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-ADM" value="ADM" name="categories">
        <label for="categories-ADM" class="tna-checkboxes__item-label">
          Admiralty, Navy, Royal Marines, and Coastguard
        </label>
      </div>
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-AIR" value="AIR" name="categories">
        <label for="categories-AIR" class="tna-checkboxes__item-label">
          Air Ministry and Royal Air Force records
        </label>
      </div>
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-BT" value="BT" name="categories">
        <label for="categories-BT" class="tna-checkboxes__item-label">
          Board of Trade and successors
        </label>
      </div>
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-C" value="C" name="categories">
        <label for="categories-C" class="tna-checkboxes__item-label">
          Chancery, the Wardrobe, Royal Household, Exchequer and various commissions
        </label>
      </div>
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-CO" value="CO" name="categories">
        <label for="categories-CO" class="tna-checkboxes__item-label">
          Colonial Office, Commonwealth and Foreign and Commonwealth Offices
        </label>
      </div>
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-E" value="E" name="categories">
        <label for="categories-E" class="tna-checkboxes__item-label">
          Exchequer, Office of First Fruits and Tenths, and the Court of Augmentations
        </label>
      </div>
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-FO" value="FO" name="categories">
        <label for="categories-FO" class="tna-checkboxes__item-label">
          Foreign Office
        </label>
      </div>
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-HO" value="HO" name="categories">
        <label for="categories-HO" class="tna-checkboxes__item-label">
          Home Office
        </label>
      </div>
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-PROB" value="PROB" name="categories">
        <label for="categories-PROB" class="tna-checkboxes__item-label">
          Prerogative Court of Canterbury
        </label>
      </div>
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-WO" value="WO" name="categories">
        <label for="categories-WO" class="tna-checkboxes__item-label">
          War Office, Armed Forces, Judge Advocate General, and related bodies
        </label>
      </div>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

headingLevel number

Required.

headingSize string
id string

Required.

name string

Required.

hint string
error object

See error.
items array

Required.

See items.
small boolean
inline boolean
formGroupClasses string

Classes to add to the checkboxes form group.
formGroupAttributes string

HTML attributes (for example data attributes) to add to the checkboxes form group.
classes string

Classes to add to the checkbox elements.
attributes object

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

Required.

Options for items
Name Type Description
text string

Required.

value string

Required.

name string
checked boolean 
{% from "nationalarchives/components/checkboxes/macro.njk" import tnaCheckboxes %}

{{ tnaCheckboxes({
  label: "Categories",
  headingLevel: 4,
  headingSize: "m",
  id: "categories",
  name: "categories",
  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"
    },
    {
      text: "War Office, Armed Forces, Judge Advocate General, and related bodies",
      value: "WO"
    }
  ],
  small: true
}) }}

Preselected

Open this example in new tab

HTML 

<div class="tna-form__group">
  <fieldset class="tna-form__fieldset">
    <legend class="tna-form__legend">
      <h4 class="tna-form__heading tna-form__heading--m">
        Categories
      </h4>
    </legend>
    <div class="tna-checkboxes" id="categories">
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-alpha" value="alpha" name="categories">
        <label for="categories-alpha" class="tna-checkboxes__item-label">
          Alpha
        </label>
      </div>
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-beta" value="beta" name="categories" checked>
        <label for="categories-beta" class="tna-checkboxes__item-label">
          Beta
        </label>
      </div>
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-gamma" value="gamma" name="categories">
        <label for="categories-gamma" class="tna-checkboxes__item-label">
          Gamma
        </label>
      </div>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

headingLevel number

Required.

headingSize string
id string

Required.

name string

Required.

hint string
error object

See error.
items array

Required.

See items.
small boolean
inline boolean
formGroupClasses string

Classes to add to the checkboxes form group.
formGroupAttributes string

HTML attributes (for example data attributes) to add to the checkboxes form group.
classes string

Classes to add to the checkbox elements.
attributes object

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

Required.

Options for items
Name Type Description
text string

Required.

value string

Required.

name string
checked boolean 
{% from "nationalarchives/components/checkboxes/macro.njk" import tnaCheckboxes %}

{{ tnaCheckboxes({
  label: "Categories",
  headingLevel: 4,
  headingSize: "m",
  id: "categories",
  name: "categories",
  items: [
    {
      text: "Alpha",
      value: "alpha"
    },
    {
      text: "Beta",
      value: "beta",
      checked: true
    },
    {
      text: "Gamma",
      value: "gamma"
    }
  ]
}) }}

Hint

Open this example in new tab

HTML 

<div class="tna-form__group">
  <fieldset class="tna-form__fieldset" aria-describedby="categories-hint ">
    <legend class="tna-form__legend">
      <h4 class="tna-form__heading tna-form__heading--m">
        Categories
      </h4>
    </legend>
    <p id="categories-hint" class="tna-form__hint">
      Select all that apply.
    </p>
    <div class="tna-checkboxes" id="categories">
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-alpha" value="alpha" name="categories">
        <label for="categories-alpha" class="tna-checkboxes__item-label">
          Alpha
        </label>
      </div>
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-beta" value="beta" name="categories">
        <label for="categories-beta" class="tna-checkboxes__item-label">
          Beta
        </label>
      </div>
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-gamma" value="gamma" name="categories">
        <label for="categories-gamma" class="tna-checkboxes__item-label">
          Gamma
        </label>
      </div>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

headingLevel number

Required.

headingSize string
id string

Required.

name string

Required.

hint string
error object

See error.
items array

Required.

See items.
small boolean
inline boolean
formGroupClasses string

Classes to add to the checkboxes form group.
formGroupAttributes string

HTML attributes (for example data attributes) to add to the checkboxes form group.
classes string

Classes to add to the checkbox elements.
attributes object

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

Required.

Options for items
Name Type Description
text string

Required.

value string

Required.

name string
checked boolean 
{% from "nationalarchives/components/checkboxes/macro.njk" import tnaCheckboxes %}

{{ tnaCheckboxes({
  label: "Categories",
  headingLevel: 4,
  headingSize: "m",
  id: "categories",
  name: "categories",
  hint: "Select all that apply.",
  items: [
    {
      text: "Alpha",
      value: "alpha"
    },
    {
      text: "Beta",
      value: "beta"
    },
    {
      text: "Gamma",
      value: "gamma"
    }
  ]
}) }}

Error

Open this example in new tab

HTML 

<div class="tna-form__group tna-form__group--error">
  <fieldset class="tna-form__fieldset" aria-describedby=" categories-error">
    <legend class="tna-form__legend">
      <h4 class="tna-form__heading tna-form__heading--m">
        Categories
      </h4>
    </legend>
    <p id="categories-error" class="tna-form__error-message">
      <span class="tna-!--visually-hidden">Error:</span> You must select a category
    </p>
    <div class="tna-checkboxes" id="categories">
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-alpha" value="alpha" name="categories">
        <label for="categories-alpha" class="tna-checkboxes__item-label">
          Alpha
        </label>
      </div>
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-beta" value="beta" name="categories">
        <label for="categories-beta" class="tna-checkboxes__item-label">
          Beta
        </label>
      </div>
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-gamma" value="gamma" name="categories">
        <label for="categories-gamma" class="tna-checkboxes__item-label">
          Gamma
        </label>
      </div>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

headingLevel number

Required.

headingSize string
id string

Required.

name string

Required.

hint string
error object

See error.
items array

Required.

See items.
small boolean
inline boolean
formGroupClasses string

Classes to add to the checkboxes form group.
formGroupAttributes string

HTML attributes (for example data attributes) to add to the checkboxes form group.
classes string

Classes to add to the checkbox elements.
attributes object

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

Required.

Options for items
Name Type Description
text string

Required.

value string

Required.

name string
checked boolean 
{% from "nationalarchives/components/checkboxes/macro.njk" import tnaCheckboxes %}

{{ tnaCheckboxes({
  label: "Categories",
  headingLevel: 4,
  headingSize: "m",
  id: "categories",
  name: "categories",
  error: {
    text: "You must select a category"
  },
  items: [
    {
      text: "Alpha",
      value: "alpha"
    },
    {
      text: "Beta",
      value: "beta"
    },
    {
      text: "Gamma",
      value: "gamma"
    }
  ]
}) }}

Inline

Open this example in new tab

HTML 

<div class="tna-form__group tna-form__group--inline">
  <fieldset class="tna-form__fieldset">
    <legend class="tna-form__legend">
      <h4 class="tna-form__heading tna-form__heading--m">
        Categories
      </h4>
    </legend>
    <div class="tna-checkboxes tna-checkboxes--small tna-checkboxes--inline" id="categories">
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-alpha" value="alpha" name="categories">
        <label for="categories-alpha" class="tna-checkboxes__item-label">
          Alpha
        </label>
      </div>
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-beta" value="beta" name="categories">
        <label for="categories-beta" class="tna-checkboxes__item-label">
          Beta
        </label>
      </div>
      <div class="tna-checkboxes__item">
        <input type="checkbox" id="categories-gamma" value="gamma" name="categories">
        <label for="categories-gamma" class="tna-checkboxes__item-label">
          Gamma
        </label>
      </div>
    </div>
  </fieldset>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
label string

Required.

headingLevel number

Required.

headingSize string
id string

Required.

name string

Required.

hint string
error object

See error.
items array

Required.

See items.
small boolean
inline boolean
formGroupClasses string

Classes to add to the checkboxes form group.
formGroupAttributes string

HTML attributes (for example data attributes) to add to the checkboxes form group.
classes string

Classes to add to the checkbox elements.
attributes object

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

Required.

Options for items
Name Type Description
text string

Required.

value string

Required.

name string
checked boolean 
{% from "nationalarchives/components/checkboxes/macro.njk" import tnaCheckboxes %}

{{ tnaCheckboxes({
  label: "Categories",
  headingLevel: 4,
  headingSize: "m",
  id: "categories",
  name: "categories",
  items: [
    {
      text: "Alpha",
      value: "alpha"
    },
    {
      text: "Beta",
      value: "beta"
    },
    {
      text: "Gamma",
      value: "gamma"
    }
  ],
  inline: true
}) }}

Back to top