Skip to main content

Search

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

<div class="ons-field">
  <label class="ons-label ons-u-pb-xs " for="search-field">Search
  </label>
  <span class="ons-grid--flex ons-search">
    <input type="search" id="search-field" class="ons-input ons-input--text ons-input-type__input ons-search__input" />
    <button type="submit" class="ons-btn ons-search__btn ons-u-mt-xs@xxs@s ons-btn--small">
      <span class="ons-btn__inner">
        <svg class="ons-svg-icon ons-u-mr-xs" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor">
          <path d="M11.86 10.23 8.62 6.99a4.63 4.63 0 1 0-6.34 1.64 4.55 4.55 0 0 0 2.36.64 4.65 4.65 0 0 0 2.33-.65l3.24 3.23a.46.46 0 0 0 .65 0l1-1a.48.48 0 0 0 0-.62Zm-5-3.32a3.28 3.28 0 0 1-2.31.93 3.22 3.22 0 1 1 2.35-.93Z" />
        </svg>
        Search</span>
    </button>
  </span>
</div>
{% from "components/input/_macro.njk" import onsInput %}

{{
    onsInput({
        "id": 'search-field',
        "label": {
            'text': 'Search',
            "classes": 'ons-u-pb-xs'
        },
        "searchButton": {
            "text": 'Search',
            "iconType": 'search'
        }
    })
}}
Name Type Required Description
input Input (ref) true Settings for the input.
searchButton Button (ref) true Settings for the button.
{% 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,
            "variants": 'small',
            "classes": 'ons-search__btn ons-u-mt-xs@xxs@s' + (" " + params.searchButton.classes if params.searchButton.classes else ""),
            "attributes": params.searchButton.attributes,
            "iconType": params.searchButton.iconType
        })
    }}
{% endmacro %}
.ons-search {
  flex-flow: row wrap;
  margin-left: -0.5rem;
  margin-top: -0.5rem;

  @include mq(s) {
    flex-flow: row nowrap !important;
  }
  &__btn {
    margin-top: -3px;
  }
  &__btn,
  &__input {
    margin-left: 0.5rem;
  }
}

How to use

Accessible placeholder

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

<div class="ons-field">
  <label class="ons-label   ons-label--placeholder " for="search-field">Search this service
  </label>
  <span class="ons-grid--flex ons-search">
    <input type="search" id="search-field" class="ons-input ons-input--text ons-input-type__input ons-search__input ons-input--placeholder" placeholder="Search this service" />
    <button type="submit" class="ons-btn ons-search__btn ons-u-mt-xs@xxs@s ons-btn--small">
      <span class="ons-btn__inner">
        <svg class="ons-svg-icon ons-u-mr-xs" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor">
          <path d="M11.86 10.23 8.62 6.99a4.63 4.63 0 1 0-6.34 1.64 4.55 4.55 0 0 0 2.36.64 4.65 4.65 0 0 0 2.33-.65l3.24 3.23a.46.46 0 0 0 .65 0l1-1a.48.48 0 0 0 0-.62Zm-5-3.32a3.28 3.28 0 0 1-2.31.93 3.22 3.22 0 1 1 2.35-.93Z" />
        </svg>
        Search</span>
    </button>
  </span>
</div>
{% from "components/input/_macro.njk" import onsInput %}

{{
    onsInput({
        "id": 'search-field',
        "label": {
            "text": 'Search this service'
        },
        "accessiblePlaceholder": true,
        "searchButton": {
            "text": 'Search',
            "iconType": 'search'
        }
    })
}}
Name Type Required Description
input Input (ref) true Settings for the input.
searchButton Button (ref) true Settings for the button.
{% 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,
            "variants": 'small',
            "classes": 'ons-search__btn ons-u-mt-xs@xxs@s' + (" " + params.searchButton.classes if params.searchButton.classes else ""),
            "attributes": params.searchButton.attributes,
            "iconType": params.searchButton.iconType
        })
    }}
{% endmacro %}
.ons-search {
  flex-flow: row wrap;
  margin-left: -0.5rem;
  margin-top: -0.5rem;

  @include mq(s) {
    flex-flow: row nowrap !important;
  }
  &__btn {
    margin-top: -3px;
  }
  &__btn,
  &__input {
    margin-left: 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="ons-field">
  <span class="ons-js-char-check-input">
    <label class="ons-label ons-u-pb-xs " for="search-field">Filter results
    </label>
    <span class="ons-grid--flex ons-search">
      <input type="search" id="search-field" class="ons-input ons-input--text ons-input-type__input ons-search__input ons-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="ons-btn ons-search__btn ons-u-mt-xs@xxs@s ons-btn--small">
        <span class="ons-btn__inner">Filter</span>
      </button>
    </span>
  </span>
  <span id="search-field-check-remaining" class="ons-input__limit ons-u-fs-s--b ons-u-d-no ons-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>
{% from "components/input/_macro.njk" import onsInput %}

{{
    onsInput({
        "id": 'search-field',
        "label": {
            'text': 'Filter results',
            "classes": 'ons-u-pb-xs'
        },
        "searchButton": {
            "text": 'Filter'
        },
        "width": "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"
        }
    })
}}
Name Type Required Description
input Input (ref) true Settings for the input.
searchButton Button (ref) true Settings for the button.
{% 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,
            "variants": 'small',
            "classes": 'ons-search__btn ons-u-mt-xs@xxs@s' + (" " + params.searchButton.classes if params.searchButton.classes else ""),
            "attributes": params.searchButton.attributes,
            "iconType": params.searchButton.iconType
        })
    }}
{% endmacro %}
.ons-search {
  flex-flow: row wrap;
  margin-left: -0.5rem;
  margin-top: -0.5rem;

  @include mq(s) {
    flex-flow: row nowrap !important;
  }
  &__btn {
    margin-top: -3px;
  }
  &__btn,
  &__input {
    margin-left: 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