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