Skip to content
ASP Digital Design System

Your web browser is out of date

Your web browser (the software you use to access the internet) is out of date. You need to update it or use a different web browser to ensure you can complete this form.

Cookies disabled

Cookies are currently not enabled in your web browser. You need to enable cookies to ensure you can complete this form.

Search input

The Search Input component lets users enter a search term and submit it using an adjacent button.

The component helps users find content, records, or results within a service such as by reference number, keyword, or name using a consistent, accessible search field.

Open this example in a new tab: search-input

<div class="asp-form__group" id="change-search-input-default">
  <label class="asp-form__label" for="search-input-default">Search</label>
  <div class="asp-form__inner asp-form__inner--with-button">
    <input class="asp-form__input asp-form--width-full" id="search-input-default" type="search" name="search-input-default" value=""  autocomplete="false" spellcheck="off">
    <button class="asp-button asp-button--append" type="submit">Search</button>
  </div>
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
id string Required. The id given to the text input. Values should use alphanumeric characters with hypthens, underscores and fullstops.
changeLinkId string The id of link given to the field for changing or addressing errors. Values should use alphanumeric characters with hypthens, underscores and fullstops.
label string Required. The descriptive text associated with the text input that explains its purpose.
hideLabel boolean Whether the lable is visually hidden. Default values (for the last breadcrumb item) are true, false (boolean) or null.
hint string A more explicit descriptive text associated with the text input that explains what kind of information is expected.
error string The descriptive text associated with the text input that explains any errors.
name string Required. Used for JavaScript whilst editing or to reference data after a form is submitted. Values should use alphanumeric characters with hypthens, underscores and fullstops.
value string, integer or null The value of the text input.
dataRegex string Regex pattern. Only present if data-name is populated.
dataName string The text before " is invalid". Only present if dataRegex is populated.
dataHint string The text after dataHint. Only present if dataRegex and dataName is populated.
dataIgnoreSpaces string Spaces within the value should be ignored when checking the regex. Only present if dataRegex and dataName is populated.
autocomplete boolean or string Values can be found https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete. Default values are 'false' or null (shows as "false"), 'true' (shows as "true").
spellcheck boolean or string Default values are 'off', 'false' or null (shows as "off"), 'on', 'true' (shows as "on").
attributes array or false (boolean) A list of additional attributes. A (key) name for each is required but corresponding value is not required. See attributes.
classes array or false (boolean) An array of additional classes. Default values are false (boolean) or null.
buttonText string Required. The text shown on the button.

Options for attributes

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null. 
{% from "components/search-input/macro.njk" import aspSearchInput %}


{{ aspSearchInput({
  id: "search-input-default",
  label: "Search",
  name: "search-input-default",
  buttonText: "Search"
}) }}
Twig macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
id string Required. The id given to the text input. Values should use alphanumeric characters with hypthens, underscores and fullstops.
changeLinkId string The id of link given to the field for changing or addressing errors. Values should use alphanumeric characters with hypthens, underscores and fullstops.
label string Required. The descriptive text associated with the text input that explains its purpose.
hideLabel boolean Whether the lable is visually hidden. Default values (for the last breadcrumb item) are true, false (boolean) or null.
hint string A more explicit descriptive text associated with the text input that explains what kind of information is expected.
error string The descriptive text associated with the text input that explains any errors.
name string Required. Used for JavaScript whilst editing or to reference data after a form is submitted. Values should use alphanumeric characters with hypthens, underscores and fullstops.
value string, integer or null The value of the text input.
dataRegex string Regex pattern. Only present if data-name is populated.
dataName string The text before " is invalid". Only present if dataRegex is populated.
dataHint string The text after dataHint. Only present if dataRegex and dataName is populated.
dataIgnoreSpaces string Spaces within the value should be ignored when checking the regex. Only present if dataRegex and dataName is populated.
autocomplete boolean or string Values can be found https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete. Default values are 'false' or null (shows as "false"), 'true' (shows as "true").
spellcheck boolean or string Default values are 'off', 'false' or null (shows as "off"), 'on', 'true' (shows as "on").
attributes array or false (boolean) A list of additional attributes. A (key) name for each is required but corresponding value is not required. See attributes.
classes array or false (boolean) An array of additional classes. Default values are false (boolean) or null.
buttonText string Required. The text shown on the button.

Options for attributes

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null. 
{% from "components/search-input/macro.njk" import aspSearchInput %}


{{ aspSearchInput({
  id: "search-input-default",
  label: "Search",
  name: "search-input-default",
  buttonText: "Search"
}) }}

Visually hidden label

Use a visually hidden label when the purpose of the search field is clear from the surrounding page context, such as in a dedicated search area or site header.

Open this example in a new tab: search-input

<div class="asp-form__group" id="change-search-input-hidden-label">
  <label class="asp-form__label sr-only" for="search-input-hidden-label">Search</label>
  <div class="asp-form__inner asp-form__inner--with-button">
    <input class="asp-form__input asp-form--width-full" id="search-input-hidden-label" type="search" name="search-input-hidden-label" value=""  autocomplete="false" spellcheck="off">
    <button class="asp-button asp-button--append" type="submit">Search</button>
  </div>
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
id string Required. The id given to the text input. Values should use alphanumeric characters with hypthens, underscores and fullstops.
changeLinkId string The id of link given to the field for changing or addressing errors. Values should use alphanumeric characters with hypthens, underscores and fullstops.
label string Required. The descriptive text associated with the text input that explains its purpose.
hideLabel boolean Whether the lable is visually hidden. Default values (for the last breadcrumb item) are true, false (boolean) or null.
hint string A more explicit descriptive text associated with the text input that explains what kind of information is expected.
error string The descriptive text associated with the text input that explains any errors.
name string Required. Used for JavaScript whilst editing or to reference data after a form is submitted. Values should use alphanumeric characters with hypthens, underscores and fullstops.
value string, integer or null The value of the text input.
dataRegex string Regex pattern. Only present if data-name is populated.
dataName string The text before " is invalid". Only present if dataRegex is populated.
dataHint string The text after dataHint. Only present if dataRegex and dataName is populated.
dataIgnoreSpaces string Spaces within the value should be ignored when checking the regex. Only present if dataRegex and dataName is populated.
autocomplete boolean or string Values can be found https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete. Default values are 'false' or null (shows as "false"), 'true' (shows as "true").
spellcheck boolean or string Default values are 'off', 'false' or null (shows as "off"), 'on', 'true' (shows as "on").
attributes array or false (boolean) A list of additional attributes. A (key) name for each is required but corresponding value is not required. See attributes.
classes array or false (boolean) An array of additional classes. Default values are false (boolean) or null.
buttonText string Required. The text shown on the button.

Options for attributes

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null. 
{% from "components/search-input/macro.njk" import aspSearchInput %}


{{ aspSearchInput({
  id: "search-input-hidden-label",
  label: "Search",
  hideLabel: true,
  name: "search-input-hidden-label",
  buttonText: "Search"
}) }}
Twig macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
id string Required. The id given to the text input. Values should use alphanumeric characters with hypthens, underscores and fullstops.
changeLinkId string The id of link given to the field for changing or addressing errors. Values should use alphanumeric characters with hypthens, underscores and fullstops.
label string Required. The descriptive text associated with the text input that explains its purpose.
hideLabel boolean Whether the lable is visually hidden. Default values (for the last breadcrumb item) are true, false (boolean) or null.
hint string A more explicit descriptive text associated with the text input that explains what kind of information is expected.
error string The descriptive text associated with the text input that explains any errors.
name string Required. Used for JavaScript whilst editing or to reference data after a form is submitted. Values should use alphanumeric characters with hypthens, underscores and fullstops.
value string, integer or null The value of the text input.
dataRegex string Regex pattern. Only present if data-name is populated.
dataName string The text before " is invalid". Only present if dataRegex is populated.
dataHint string The text after dataHint. Only present if dataRegex and dataName is populated.
dataIgnoreSpaces string Spaces within the value should be ignored when checking the regex. Only present if dataRegex and dataName is populated.
autocomplete boolean or string Values can be found https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete. Default values are 'false' or null (shows as "false"), 'true' (shows as "true").
spellcheck boolean or string Default values are 'off', 'false' or null (shows as "off"), 'on', 'true' (shows as "on").
attributes array or false (boolean) A list of additional attributes. A (key) name for each is required but corresponding value is not required. See attributes.
classes array or false (boolean) An array of additional classes. Default values are false (boolean) or null.
buttonText string Required. The text shown on the button.

Options for attributes

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null. 
{% from "components/search-input/macro.njk" import aspSearchInput %}


{{ aspSearchInput({
  id: "search-input-hidden-label",
  label: "Search",
  hideLabel: true,
  name: "search-input-hidden-label",
  buttonText: "Search"
}) }}

Search input with hint

Use hint text when users need additional guidance on what they can search for or how results will be matched.

Open this example in a new tab: search-input

<div class="asp-form__group" id="change-search-input-hint">
  <label class="asp-form__label" for="search-input-hint">Search</label>
  <p class="asp-form__hint">Search by reference number or keyword.</p>
  <div class="asp-form__inner asp-form__inner--with-button">
    <input class="asp-form__input asp-form--width-full" id="search-input-hint" type="search" name="search-input-hint" value=""  autocomplete="false" spellcheck="off">
    <button class="asp-button asp-button--append" type="submit">Search</button>
  </div>
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
id string Required. The id given to the text input. Values should use alphanumeric characters with hypthens, underscores and fullstops.
changeLinkId string The id of link given to the field for changing or addressing errors. Values should use alphanumeric characters with hypthens, underscores and fullstops.
label string Required. The descriptive text associated with the text input that explains its purpose.
hideLabel boolean Whether the lable is visually hidden. Default values (for the last breadcrumb item) are true, false (boolean) or null.
hint string A more explicit descriptive text associated with the text input that explains what kind of information is expected.
error string The descriptive text associated with the text input that explains any errors.
name string Required. Used for JavaScript whilst editing or to reference data after a form is submitted. Values should use alphanumeric characters with hypthens, underscores and fullstops.
value string, integer or null The value of the text input.
dataRegex string Regex pattern. Only present if data-name is populated.
dataName string The text before " is invalid". Only present if dataRegex is populated.
dataHint string The text after dataHint. Only present if dataRegex and dataName is populated.
dataIgnoreSpaces string Spaces within the value should be ignored when checking the regex. Only present if dataRegex and dataName is populated.
autocomplete boolean or string Values can be found https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete. Default values are 'false' or null (shows as "false"), 'true' (shows as "true").
spellcheck boolean or string Default values are 'off', 'false' or null (shows as "off"), 'on', 'true' (shows as "on").
attributes array or false (boolean) A list of additional attributes. A (key) name for each is required but corresponding value is not required. See attributes.
classes array or false (boolean) An array of additional classes. Default values are false (boolean) or null.
buttonText string Required. The text shown on the button.

Options for attributes

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null. 
{% from "components/search-input/macro.njk" import aspSearchInput %}


{{ aspSearchInput({
  id: "search-input-hint",
  label: "Search",
  hint: "Search by reference number or keyword.",
  name: "search-input-hint",
  buttonText: "Search"
}) }}
Twig macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
id string Required. The id given to the text input. Values should use alphanumeric characters with hypthens, underscores and fullstops.
changeLinkId string The id of link given to the field for changing or addressing errors. Values should use alphanumeric characters with hypthens, underscores and fullstops.
label string Required. The descriptive text associated with the text input that explains its purpose.
hideLabel boolean Whether the lable is visually hidden. Default values (for the last breadcrumb item) are true, false (boolean) or null.
hint string A more explicit descriptive text associated with the text input that explains what kind of information is expected.
error string The descriptive text associated with the text input that explains any errors.
name string Required. Used for JavaScript whilst editing or to reference data after a form is submitted. Values should use alphanumeric characters with hypthens, underscores and fullstops.
value string, integer or null The value of the text input.
dataRegex string Regex pattern. Only present if data-name is populated.
dataName string The text before " is invalid". Only present if dataRegex is populated.
dataHint string The text after dataHint. Only present if dataRegex and dataName is populated.
dataIgnoreSpaces string Spaces within the value should be ignored when checking the regex. Only present if dataRegex and dataName is populated.
autocomplete boolean or string Values can be found https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete. Default values are 'false' or null (shows as "false"), 'true' (shows as "true").
spellcheck boolean or string Default values are 'off', 'false' or null (shows as "off"), 'on', 'true' (shows as "on").
attributes array or false (boolean) A list of additional attributes. A (key) name for each is required but corresponding value is not required. See attributes.
classes array or false (boolean) An array of additional classes. Default values are false (boolean) or null.
buttonText string Required. The text shown on the button.

Options for attributes

Name Type Description
name string Required. The name of the attribute.
value string The value of the attribute. Note, boolean values must be strings. Default values are false (boolean) or null. 
{% from "components/search-input/macro.njk" import aspSearchInput %}


{{ aspSearchInput({
  id: "search-input-hint",
  label: "Search",
  hint: "Search by reference number or keyword.",
  name: "search-input-hint",
  buttonText: "Search"
}) }}

When to use this component

Use the Search Input component when users need to submit a search query to find information within a service.

This includes:

  • Searching lists or tables of records
  • Finding items by reference number, keyword, or name
  • Dedicated search pages or search sections within a page
  • Filtering results where a submit action is required

The purpose of the component is to provide a standard search experience, including a labelled input, optional hint text, and a submit button so users can confidently search across ASP Digital services.

When not to use this component

Do not use the Search Input component for general text entry that is not a search action.

Use the Input component instead for standard form fields such as names, addresses, or reference numbers collected as part of a wider form.

Before using this component, consider:

  • Whether the field is genuinely a search action rather than data entry
  • Whether hint text is needed to explain what can be searched
  • Whether the label can be visually hidden without losing context for screen reader users
  • Whether validation or error messaging is required for empty or invalid searches

The Search Input component uses a full-width text field with an appended submit button. The input uses type="search" and follows ASP form styling to align with other form components across the design system.

Example of where we have used this component

This component is used on:

  • VIM
  • Action cards
  • Tasks

This list is not exhaustive.

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.

Development criteria Status
WCAG 2.2 compliant Not started
WCAG 2.1 compliant Completed
HTML / Nunjucks version Completed
Figma version Not started
M365 versions Not started
Documentation Not started

Make a change to the Design System

Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.

Published 16 June 2026
Last updated 16 June 2026