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>
{% 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>
{% 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>
{% 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.