Components
Checkboxes
Checkboxes allow users to post multiple options for the same field.
Contents
<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 options
| Name | Type | Description |
|---|---|---|
| label | string |
Required. The label for the checkboxes field. |
| headingLevel | number |
Required. The heading level which represents an element from |
| headingSize | string |
The physical size of the checkboxes title ( |
| id | string |
Required. A unique ID for the checkboxes 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. |
| items | array |
Required. A list of checkbox items to render. |
| small | boolean |
If true, show smaller checkboxes. |
| inline | boolean |
If true, show the checkboxes inline rather than vertical. |
| formGroupClasses | string |
Classes to add to the checkboxes form group. |
| formGroupAttributes | object |
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. |
| Name | Type | Description |
|---|---|---|
| text | string |
Required. The error text to display. |
| Name | Type | Description |
|---|---|---|
| text | string |
Required. The label of the checkbox item. |
| value | string |
Required. The form field value. |
| name | string |
The name of the form field item. If set, this will override the main |
| checked | boolean |
If true, the checkbox will be checked. |
{% 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"
}
]
}) }}Component status
- Phase
- Beta
- Tested without CSS
- Yes
- Passed DAC audit
- Not yet audied
- Analytics integrated
- Yes
- Documentation complete
- No
Small
<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>
</fieldset>
</div>Nunjucks options
| Name | Type | Description |
|---|---|---|
| label | string |
Required. The label for the checkboxes field. |
| headingLevel | number |
Required. The heading level which represents an element from |
| headingSize | string |
The physical size of the checkboxes title ( |
| id | string |
Required. A unique ID for the checkboxes 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. |
| items | array |
Required. A list of checkbox items to render. |
| small | boolean |
If true, show smaller checkboxes. |
| inline | boolean |
If true, show the checkboxes inline rather than vertical. |
| formGroupClasses | string |
Classes to add to the checkboxes form group. |
| formGroupAttributes | object |
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. |
| Name | Type | Description |
|---|---|---|
| text | string |
Required. The error text to display. |
| Name | Type | Description |
|---|---|---|
| text | string |
Required. The label of the checkbox item. |
| value | string |
Required. The form field value. |
| name | string |
The name of the form field item. If set, this will override the main |
| checked | boolean |
If true, the checkbox will be checked. |
{% 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"
}
],
small: true
}) }}Preselected
<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 options
| Name | Type | Description |
|---|---|---|
| label | string |
Required. The label for the checkboxes field. |
| headingLevel | number |
Required. The heading level which represents an element from |
| headingSize | string |
The physical size of the checkboxes title ( |
| id | string |
Required. A unique ID for the checkboxes 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. |
| items | array |
Required. A list of checkbox items to render. |
| small | boolean |
If true, show smaller checkboxes. |
| inline | boolean |
If true, show the checkboxes inline rather than vertical. |
| formGroupClasses | string |
Classes to add to the checkboxes form group. |
| formGroupAttributes | object |
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. |
| Name | Type | Description |
|---|---|---|
| text | string |
Required. The error text to display. |
| Name | Type | Description |
|---|---|---|
| text | string |
Required. The label of the checkbox item. |
| value | string |
Required. The form field value. |
| name | string |
The name of the form field item. If set, this will override the main |
| checked | boolean |
If true, the checkbox will be checked. |
{% 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
<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 options
| Name | Type | Description |
|---|---|---|
| label | string |
Required. The label for the checkboxes field. |
| headingLevel | number |
Required. The heading level which represents an element from |
| headingSize | string |
The physical size of the checkboxes title ( |
| id | string |
Required. A unique ID for the checkboxes 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. |
| items | array |
Required. A list of checkbox items to render. |
| small | boolean |
If true, show smaller checkboxes. |
| inline | boolean |
If true, show the checkboxes inline rather than vertical. |
| formGroupClasses | string |
Classes to add to the checkboxes form group. |
| formGroupAttributes | object |
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. |
| Name | Type | Description |
|---|---|---|
| text | string |
Required. The error text to display. |
| Name | Type | Description |
|---|---|---|
| text | string |
Required. The label of the checkbox item. |
| value | string |
Required. The form field value. |
| name | string |
The name of the form field item. If set, this will override the main |
| checked | boolean |
If true, the checkbox will be checked. |
{% 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
<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 options
| Name | Type | Description |
|---|---|---|
| label | string |
Required. The label for the checkboxes field. |
| headingLevel | number |
Required. The heading level which represents an element from |
| headingSize | string |
The physical size of the checkboxes title ( |
| id | string |
Required. A unique ID for the checkboxes 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. |
| items | array |
Required. A list of checkbox items to render. |
| small | boolean |
If true, show smaller checkboxes. |
| inline | boolean |
If true, show the checkboxes inline rather than vertical. |
| formGroupClasses | string |
Classes to add to the checkboxes form group. |
| formGroupAttributes | object |
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. |
| Name | Type | Description |
|---|---|---|
| text | string |
Required. The error text to display. |
| Name | Type | Description |
|---|---|---|
| text | string |
Required. The label of the checkbox item. |
| value | string |
Required. The form field value. |
| name | string |
The name of the form field item. If set, this will override the main |
| checked | boolean |
If true, the checkbox will be checked. |
{% 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
<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 options
| Name | Type | Description |
|---|---|---|
| label | string |
Required. The label for the checkboxes field. |
| headingLevel | number |
Required. The heading level which represents an element from |
| headingSize | string |
The physical size of the checkboxes title ( |
| id | string |
Required. A unique ID for the checkboxes 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. |
| items | array |
Required. A list of checkbox items to render. |
| small | boolean |
If true, show smaller checkboxes. |
| inline | boolean |
If true, show the checkboxes inline rather than vertical. |
| formGroupClasses | string |
Classes to add to the checkboxes form group. |
| formGroupAttributes | object |
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. |
| Name | Type | Description |
|---|---|---|
| text | string |
Required. The error text to display. |
| Name | Type | Description |
|---|---|---|
| text | string |
Required. The label of the checkbox item. |
| value | string |
Required. The form field value. |
| name | string |
The name of the form field item. If set, this will override the main |
| checked | boolean |
If true, the checkbox will be checked. |
{% 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
}) }}