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