Components

Select

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

Component status
Preselected
Hint
Error

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-item">
  <div class="tna-form-item__header">
    <h4 class="tna-form-item__label tna-heading-m">
      <label for="sort">
        Sort by
      </label>
    </h4>
  </div>
  <div class="tna-form-item__body">
    <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>
</div>

Nunjucks

Nunjucks options

Primary options
Name	Type	Description
label	string	Required. The label for the select field.
headingLevel	number	The heading level which represents an element from `<h1>` through to `<h6>`.
headingSize	string	The physical size of the select title (`xl`, `l`, `m`, `s` or `xs`). Default value: `m`
id	string	Required. A unique ID for the select 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. See macro options for items.
selected	string
size	string
formItemClasses	string	Classes to add to the select form group.
formItemAttributes	object	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. The error text to display.

Options for items
Name	Type	Description
text	string	Required.
value	string	Required. The form field value.

{% 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"
    }
  ]
}) }}

Component status

Phase: To be reviewed
Tested without CSS: Yes
Passed DAC audit: Not yet audied
Documentation complete: No

Preselected

Open this example in new tab

HTML

<div class="tna-form-item">
  <div class="tna-form-item__header">
    <h4 class="tna-form-item__label tna-heading-m">
      <label for="sort">
        Sort by
      </label>
    </h4>
  </div>
  <div class="tna-form-item__body">
    <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>
</div>

Nunjucks

Nunjucks options

Primary options
Name	Type	Description
label	string	Required. The label for the select field.
headingLevel	number	The heading level which represents an element from `<h1>` through to `<h6>`.
headingSize	string	The physical size of the select title (`xl`, `l`, `m`, `s` or `xs`). Default value: `m`
id	string	Required. A unique ID for the select 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. See macro options for items.
selected	string
size	string
formItemClasses	string	Classes to add to the select form group.
formItemAttributes	object	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. The error text to display.

Options for items
Name	Type	Description
text	string	Required.
value	string	Required. The form field value.

{% 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-item">
  <div class="tna-form-item__header">
    <h4 class="tna-form-item__label tna-heading-m">
      <label for="sort">
        Sort by
      </label>
    </h4>
  </div>
  <p id="sort-hint" class="tna-form-item__hint">
    Select a property to sort by.
  </p>
  <div class="tna-form-item__body">
    <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>
</div>

Nunjucks

Nunjucks options

Primary options
Name	Type	Description
label	string	Required. The label for the select field.
headingLevel	number	The heading level which represents an element from `<h1>` through to `<h6>`.
headingSize	string	The physical size of the select title (`xl`, `l`, `m`, `s` or `xs`). Default value: `m`
id	string	Required. A unique ID for the select 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. See macro options for items.
selected	string
size	string
formItemClasses	string	Classes to add to the select form group.
formItemAttributes	object	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. The error text to display.

Options for items
Name	Type	Description
text	string	Required.
value	string	Required. The form field value.

{% 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-item tna-form-item--error">
  <div class="tna-form-item__header">
    <h4 class="tna-form-item__label tna-heading-m">
      <label for="sort">
        Sort by
      </label>
    </h4>
  </div>
  <p id="sort-error" class="tna-form-item__error">
    <span class="tna-!--visually-hidden">Error:</span> You must select something to sort by
  </p>
  <div class="tna-form-item__body">
    <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>
</div>

Nunjucks

Nunjucks options

Primary options
Name	Type	Description
label	string	Required. The label for the select field.
headingLevel	number	The heading level which represents an element from `<h1>` through to `<h6>`.
headingSize	string	The physical size of the select title (`xl`, `l`, `m`, `s` or `xs`). Default value: `m`
id	string	Required. A unique ID for the select 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. See macro options for items.
selected	string
size	string
formItemClasses	string	Classes to add to the select form group.
formItemAttributes	object	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. The error text to display.

Options for items
Name	Type	Description
text	string	Required.
value	string	Required. The form field value.

{% 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"
    }
  ]
}) }}

This website uses cookies

Select

Contents

HTML

Nunjucks

Component status

Preselected

HTML

Nunjucks

Hint

HTML

Nunjucks

Error

HTML

Nunjucks