Search
Use the search component to allow a user to search for a page.
Example: Example Search contents
Nunjucks
{% from "components/input/_macro.njk" import onsInput %}
{{
onsInput({
"id": 'search-field',
"label": {
'text': 'Search',
"classes": 'ons-u-pb-xxs ons-u-mb-no'
},
"searchButton": {
"visuallyHideButtonText": true,
"text": 'Search',
"iconType": 'search'
}
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| input | Input (ref) | true | Settings for the input. |
| searchButton | object<searchButton> | true | Settings for the searchButton |
searchButton
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | Sets the HTML id of the button |
| text | string | true | Text label for the button |
| type | string | false | Sets the HTML type attribute for the <button>. Can be set to either: “button” or “reset”. Defaults to “submit”. |
| iconType | string | false | Adds an icon to the button, before the label, by setting the icon type |
| classes | string | false | Classes to add to the button component |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the button component |
| visuallyHideButtonText | boolean | false | Will wrap the provided text value in a visually hidden span |
HTML
<div class="ons-field">
<label class="ons-label ons-u-pb-xxs ons-u-mb-no" for="search-field">Search</label>
<span class="ons-grid--flex ons-search">
<div class="ons-search-component">
<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" 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>
<span class="ons-btn__text ons-u-vh@xxs@s"><span class="ons-u-vh">Search</span></span>
</span>
</button>
</div>
</span>
</div>How to use this component
Accessible placeholder
To create an accessible placeholder for the input, provide accessiblePlaceholder: true and a label.
Example: Example Search With Placeholder contents
Nunjucks
{% from "components/input/_macro.njk" import onsInput %}
{{
onsInput({
"id": 'search-field',
"label": {
"text": 'Search this service'
},
"accessiblePlaceholder": true,
"searchButton": {
"visuallyHideButtonText": true,
"text": 'Search',
"iconType": 'search'
}
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| input | Input (ref) | true | Settings for the input. |
| searchButton | object<searchButton> | true | Settings for the searchButton |
searchButton
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | Sets the HTML id of the button |
| text | string | true | Text label for the button |
| type | string | false | Sets the HTML type attribute for the <button>. Can be set to either: “button” or “reset”. Defaults to “submit”. |
| iconType | string | false | Adds an icon to the button, before the label, by setting the icon type |
| classes | string | false | Classes to add to the button component |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the button component |
| visuallyHideButtonText | boolean | false | Will wrap the provided text value in a visually hidden span |
HTML
<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">
<div class="ons-search-component">
<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" 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>
<span class="ons-btn__text ons-u-vh@xxs@s"><span class="ons-u-vh">Search</span></span>
</span>
</button>
</div>
</span>
</div>Use appropriately sized inputs
To make the width of input smaller, use a width constraint class.
If the search context is known, for instance a sequence of characters of a known size, the width constraint and character check can help users enter the correct information.
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 until the length of the input value matches the value supplied to the limit param.
Example: Example Search With Character Check contents
Nunjucks
{% from "components/input/_macro.njk" import onsInput %}
{{
onsInput({
"id": 'search-field',
"label": {
'text': 'Filter results',
"classes": 'ons-u-pb-xxs ons-u-mb-no'
},
"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"
}
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| input | Input (ref) | true | Settings for the input. |
| searchButton | object<searchButton> | true | Settings for the searchButton |
searchButton
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | Sets the HTML id of the button |
| text | string | true | Text label for the button |
| type | string | false | Sets the HTML type attribute for the <button>. Can be set to either: “button” or “reset”. Defaults to “submit”. |
| iconType | string | false | Adds an icon to the button, before the label, by setting the icon type |
| classes | string | false | Classes to add to the button component |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the button component |
| visuallyHideButtonText | boolean | false | Will wrap the provided text value in a visually hidden span |
HTML
<div class="ons-field">
<span class="ons-js-char-check-input">
<label class="ons-label ons-u-pb-xxs ons-u-mb-no" for="search-field">Filter results</label>
<span class="ons-grid--flex ons-search">
<div class="ons-search-component">
<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"><span class="ons-btn__text">Filter</span>
</span>
</button>
</div>
</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>Help improve this page
Let us know how we could improve this page, or share your user research findings. Discuss the ‘Search’ component on GitHub (opens in a new tab)