Skip to main content Skip to list of components
Beta

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

Components

Select

The select component allows users to select a single value from a list of options.

Contents

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

Where possible, avoid overusing the select component. Alice Bartlett gave a talk at EpicFEL called "Burn your select tags" which explains when the <select> tag is not the most appropriate tag to use.

Open this example in new tab

HTML 

<div class="tna-form__group">
  <div class="tna-form__group-contents">
    <h4 class="tna-form__heading tna-form__heading--m">
      <label class="tna-form__label" for="sort">
        Sort by
      </label>
    </h4>
  </div>
  <select class="tna-select " name="sort" id="sort">
    <option value="relevance">Relevance</option>
    <option value="date">Date</option>
    <option value="title">Title</option>
  </select>
</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.
selected string
size string
inline boolean
formGroupClasses string

Classes to add to the select form group.
formGroupAttributes string

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

Classes to add to the select.
attributes object

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

Required.

Options for items
Name Type Description
text string

Required.

value string

Required. 

{% from "nationalarchives/components/select/macro.njk" import tnaSelect %}

{{ tnaSelect({
  label: "Sort by",
  headingLevel: 4,
  headingSize: "m",
  id: "sort",
  name: "sort",
  items: [
    {
      text: "Relevance",
      value: "relevance"
    },
    {
      text: "Date",
      value: "date"
    },
    {
      text: "Title",
      value: "title"
    }
  ]
}) }}

Status

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

Preselected

Open this example in new tab

HTML 

<div class="tna-form__group">
  <div class="tna-form__group-contents">
    <h4 class="tna-form__heading tna-form__heading--m">
      <label class="tna-form__label" for="sort">
        Sort by
      </label>
    </h4>
  </div>
  <select class="tna-select " name="sort" id="sort">
    <option value="relevance">Relevance</option>
    <option value="date" selected>Date</option>
    <option value="title">Title</option>
  </select>
</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.
selected string
size string
inline boolean
formGroupClasses string

Classes to add to the select form group.
formGroupAttributes string

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

Classes to add to the select.
attributes object

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

Required.

Options for items
Name Type Description
text string

Required.

value string

Required. 

{% from "nationalarchives/components/select/macro.njk" import tnaSelect %}

{{ tnaSelect({
  label: "Sort by",
  headingLevel: 4,
  headingSize: "m",
  id: "sort",
  name: "sort",
  items: [
    {
      text: "Relevance",
      value: "relevance"
    },
    {
      text: "Date",
      value: "date"
    },
    {
      text: "Title",
      value: "title"
    }
  ],
  selected: "date"
}) }}

Hint

Open this example in new tab

HTML 

<div class="tna-form__group">
  <div class="tna-form__group-contents">
    <h4 class="tna-form__heading tna-form__heading--m">
      <label class="tna-form__label" for="sort">
        Sort by
      </label>
    </h4>
    <p id="sort-hint" class="tna-form__hint">
      Select a property to sort by.
    </p>
  </div>
  <select class="tna-select " name="sort" id="sort" aria-describedby="sort-hint">
    <option value="relevance">Relevance</option>
    <option value="date">Date</option>
    <option value="title">Title</option>
  </select>
</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.
selected string
size string
inline boolean
formGroupClasses string

Classes to add to the select form group.
formGroupAttributes string

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

Classes to add to the select.
attributes object

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

Required.

Options for items
Name Type Description
text string

Required.

value string

Required. 

{% from "nationalarchives/components/select/macro.njk" import tnaSelect %}

{{ tnaSelect({
  label: "Sort by",
  headingLevel: 4,
  headingSize: "m",
  id: "sort",
  name: "sort",
  hint: "Select a property to sort by.",
  items: [
    {
      text: "Relevance",
      value: "relevance"
    },
    {
      text: "Date",
      value: "date"
    },
    {
      text: "Title",
      value: "title"
    }
  ]
}) }}

Error

Open this example in new tab

HTML 

<div class="tna-form__group tna-form__group--error">
  <div class="tna-form__group-contents">
    <h4 class="tna-form__heading tna-form__heading--m">
      <label class="tna-form__label" for="sort">
        Sort by
      </label>
    </h4>
    <p id="sort-error" class="tna-form__error-message">
      <span class="tna-!--visually-hidden">Error:</span> You must select something to sort by
    </p>
  </div>
  <select class="tna-select " name="sort" id="sort">
    <option value="relevance">Relevance</option>
    <option value="date">Date</option>
    <option value="title">Title</option>
  </select>
</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.
selected string
size string
inline boolean
formGroupClasses string

Classes to add to the select form group.
formGroupAttributes string

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

Classes to add to the select.
attributes object

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

Required.

Options for items
Name Type Description
text string

Required.

value string

Required. 

{% from "nationalarchives/components/select/macro.njk" import tnaSelect %}

{{ tnaSelect({
  label: "Sort by",
  headingLevel: 4,
  headingSize: "m",
  id: "sort",
  name: "sort",
  error: {
    text: "You must select something to sort by"
  },
  items: [
    {
      text: "Relevance",
      value: "relevance"
    },
    {
      text: "Date",
      value: "date"
    },
    {
      text: "Title",
      value: "title"
    }
  ]
}) }}

Inline

Open this example in new tab

HTML 

<div class="tna-form__group tna-form__group--inline">
  <div class="tna-form__group-contents">
    <h4 class="tna-form__heading tna-form__heading--m">
      <label class="tna-form__label" for="sort">
        Sort by
      </label>
    </h4>
  </div>
  <select class="tna-select " name="sort" id="sort">
    <option value="relevance">Relevance</option>
    <option value="date">Date</option>
    <option value="title">Title</option>
  </select>
</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.
selected string
size string
inline boolean
formGroupClasses string

Classes to add to the select form group.
formGroupAttributes string

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

Classes to add to the select.
attributes object

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

Required.

Options for items
Name Type Description
text string

Required.

value string

Required. 

{% from "nationalarchives/components/select/macro.njk" import tnaSelect %}

{{ tnaSelect({
  label: "Sort by",
  headingLevel: 4,
  headingSize: "m",
  id: "sort",
  name: "sort",
  items: [
    {
      text: "Relevance",
      value: "relevance"
    },
    {
      text: "Date",
      value: "date"
    },
    {
      text: "Title",
      value: "title"
    }
  ],
  inline: true
}) }}

Back to top