Skip to main content

Testing

Help us to improve the ONS Design System. Take part in a short study

Search

The search component provides an input and button for searching a service.

<div class="field">
  <label class="label  " for="search-field">Search
  </label>
  <span class="grid--flex search">
    <input type="search" id="search-field" class="input input--text input-type__input search__input" />
    <button type="submit" class="btn btn--small search__btn">
      <span class="btn__inner">Search</span>
    </button>
  </span>
</div>
Nunjucks macro options
Name Type Required Description
input Input (ref) true Settings for the input.
searchButton Button (ref) true Settings for the button.
{% from "components/input/_macro.njk" import onsInput %}
{{
    onsInput({
        "id": 'search-field',
        "label": {
            'text': 'Search'
        },
        "searchButton": {
            "text": 'Search'
        }
    })
}}

{% macro onsSearch(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% set content = caller() %}
    {{ content | safe }}
    {{
        onsButton({
            "type": params.searchButton.type,
            "text": params.searchButton.text,
            "id": params.searchButton.id,
            "classes": 'btn--small search__btn' + (" " + params.searchButton.classes if params.searchButton.classes else ""),
            "attribues": params.searchButton.attribues
        })
    }}
{% endmacro %}

.search {
  flex-flow: row wrap;
  margin-left: -0.5rem;
  margin-top: -0.5rem;
  @include mq(s) {
    flex-flow: row nowrap !important;
  }
  &__btn,
  &__input {
    margin-left: 0.5rem;
    margin-top: 0.5rem;
  }
}
.label--placeholder {
  margin-top: 0.5rem;
}

How to use

Accessible placeholder

Provide accessiblePlaceholder: true and a label to create an accessible placeholder for the input.

<div class="field">
  <label class="label   label--placeholder " for="search-field">Search this service
  </label>
  <span class="grid--flex search">
    <input type="search" id="search-field" class="input input--text input-type__input search__input input--placeholder" placeholder="Search this service" />
    <button type="submit" class="btn btn--small search__btn">
      <span class="btn__inner">Search</span>
    </button>
  </span>
</div>
Nunjucks macro options
Name Type Required Description
input Input (ref) true Settings for the input.
searchButton Button (ref) true Settings for the button.
{% from "components/input/_macro.njk" import onsInput %}
{{
    onsInput({
        "id": 'search-field',
        "label": {
            "text": 'Search this service'
        },
        "accessiblePlaceholder": true,
        "searchButton": {
            "text": 'Search'
        }
    })
}}

{% macro onsSearch(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% set content = caller() %}
    {{ content | safe }}
    {{
        onsButton({
            "type": params.searchButton.type,
            "text": params.searchButton.text,
            "id": params.searchButton.id,
            "classes": 'btn--small search__btn' + (" " + params.searchButton.classes if params.searchButton.classes else ""),
            "attribues": params.searchButton.attribues
        })
    }}
{% endmacro %}

.search {
  flex-flow: row wrap;
  margin-left: -0.5rem;
  margin-top: -0.5rem;
  @include mq(s) {
    flex-flow: row nowrap !important;
  }
  &__btn,
  &__input {
    margin-left: 0.5rem;
    margin-top: 0.5rem;
  }
}
.label--placeholder {
  margin-top: 0.5rem;
}

Use appropriately sized inputs

A width constraint class can be used to make the width of input smaller. If the search context is known, for instance a sequence of characters of a known size, the width constraint can help users.

#

Character check

The character check counter is displayed when the charCheckLimit object is included with params limit, charCountOverLimitSingular, charCountOverLimitPlural, charCountPlural and charCountSingular parameters are defined.

The button is disabled unless the input value matches the value supplied to the charcheck param.

<div class="field">
  <span class="js-char-check-input">
    <label class="label  " for="search-field">Filter results
    </label>
    <span class="grid--flex search">
      <input type="search" id="search-field" class="input input--text input-type__input search__input input--w-10" data-char-check-ref="search-field-check-remaining" data-char-check-num="10" aria-describedby="search-field-check-remaining" data-char-check-countdown="true" />
      <button type="submit" class="btn btn--small search__btn">
        <span class="btn__inner">Filter</span>
      </button>
    </span>
  </span>
  <span id="search-field-check-remaining" class="input__limit u-fs-s--b u-d-no u-mt-xs" data-charcount-singular="{x} more character needed" data-charcount-plural="{x} more characters needed" data-charcount-limit-singular="{x} character too many" data-charcount-limit-plural="{x} characters too many">
  </span>
</div>
Nunjucks macro options
Name Type Required Description
input Input (ref) true Settings for the input.
searchButton Button (ref) true Settings for the button.
{% from "components/input/_macro.njk" import onsInput %}
{{
    onsInput({
        "id": 'search-field',
        "label": {
            'text': 'Filter results'
        },
        "searchButton": {
            "text": 'Filter'
        },
        "classes": "input--w-10",
        "charCheckLimit": {
            "charcheckCountdown": true,
            "limit": 10,
            "charCountSingular": "{x} more character needed",
            "charCountPlural": "{x} more characters needed",
            "charCountOverLimitSingular": "{x} character too many",
            "charCountOverLimitPlural": "{x} characters too many"
        }
    })
}}

{% macro onsSearch(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    {% set content = caller() %}
    {{ content | safe }}
    {{
        onsButton({
            "type": params.searchButton.type,
            "text": params.searchButton.text,
            "id": params.searchButton.id,
            "classes": 'btn--small search__btn' + (" " + params.searchButton.classes if params.searchButton.classes else ""),
            "attribues": params.searchButton.attribues
        })
    }}
{% endmacro %}

.search {
  flex-flow: row wrap;
  margin-left: -0.5rem;
  margin-top: -0.5rem;
  @include mq(s) {
    flex-flow: row nowrap !important;
  }
  &__btn,
  &__input {
    margin-left: 0.5rem;
    margin-top: 0.5rem;
  }
}
.label--placeholder {
  margin-top: 0.5rem;
}

Help improve this component

Let us know how we could improve this component or share your user research findings.

Discuss the ‘Search’ component on GitHub