Please don't forget to read Usage part of each element.
Search fields
expiry date: 30/04/2021
Search allows users to specify a word or a phrase to find relevant result without the use of navigation.
Types

- Default search field - As-you-type suggestion search
If you wish to offer suggestions to the user (e.g. fuzzy, elactic or autocomplete searches), this option is very handy and enables dynamic results. - Search field with button
When a search is static, this option allows the users to type in its request and hit the search button in order to submit the search request.
Forms can be simple or complex, so we have prepared clear recommendations for you to use. These guidelines will help you build your forms and maintain consistency between all the forms of our digital platforms. Discover our recommandations to build a form.
States

For all the input field states info, please refer to the text field article.
- Default state
State visible before click. Field and label are displayed. No user input yet. - Active state
State visible when the field is focused. - Hover/Focus state
State visible when the cursor hovers the suggestion and triggered by keyboard navigation or click.
Autocomplete
If you wish to offer suggestions to the user (e.g. fuzzy, elactic or autocomplete searches), this option is very handy and enables dynamic results.
Default autocomplete

-
Text field state
Allows users to open the options panel. For more info about the field, check out the text field article. -
Search for the input
If the user wish to search for the specific string he entered, this first item of the list will act as the submit button. It differs from the rest of the elements in the list by its color and the magnifying glass icon. -
Suggestions panel
The suggestion panel open when the user start typing, this panel contains all the the items that the system found. -
Suggestion
Each suggestion item within the list is a clickable element that triggers the search with the specific element clicked.
Add a suggestion

In some cases, you should prevent the users ending up with an empty result. Hence, you can offer them to add their input to the list of entries, they'll be able to move forward in the flow their currently in.
This is an optional element of the component. Before using this option, make sure that the data model allows this option.
Complexe autocomplete with checkboxes

-
Text field state
Allows users to open the options panel. For more info about the field, check out the text field article. -
Suggestions panel
The suggestion panel open when the user start typing, this panel contains a list of options to select from that the system found. -
Suggestion
Each option item within the list is a checkbox element that triggers the search with the specific checkbox clicked. Multiple checkboxes can be selected at once.
Sizes and colors
All form fields have a 100% width so they need to be included in a gridding to have the wished size.
Each <input>
must be wrapped within <div class="rs-form-item">
container. This container must contain <input type="search">
and <label>
linked to the input thanks to for
attribute refering to the <input>
id
.
We put ac-
prefix (abbreviation for "accessibility") to know that this id
has been added for accessibility matter.
By default, all form fields are mandatory, except those mentionned with (optional) in the label.
Default search
Default negative search
rs-form-neg
class added on <form>
or a <div>
container (if <form>
is not needed in particular cases like with Angular) allows to switch all form fields to negative version.
Search with button
Search fields can be combined with a button as a standalone form.
Search loading
Error search
To use Zurb Foundation form check javascript, data-abide="ajax"
should be added to <form>
so error
class will be added/removed dynamically when needed, for example if <input>
is required.
The error message <span>
should have an id
(prefixed with "ac-" as accessibility abbreviation to know this is added for accessibility matter) which should be referenced in the <input aria-describedby="error_id">
for screen readers when the error is displayed. This is automatically added by the javascript.
Search with helper text
A helper text
should have an id
(prefixed with "ac-" as accessibility abbreviation to know this is added for accessibility matter) which should be referenced in the <input aria-describedby="helper_id">
for screen readers.
Disabled search
Just add disabled
attribute to both <input>
and <button>
.
Search with autocomplete
The list used for autocomplete is set to display: none
by default. The dynamization has to be added by each team according to its own needs. Here are some usefull documentations: select your poison - Editable Combobox With Both List and Inline Autocomplete Example
In overlayer, use a gridding columns small-12 medium-11
around.
Following attributes have to be added to <input> for screenreaders to understand the list related to the search field:
-
autocomplete="off"
stops browsers from showing their own suggestions, which would interfere with those offered by our component -
role="combobox"
: a combo box is an edit control with an associated list box that provides a set of predefined choices -
aria-controls="ac-searchlist-id"
containing the ID of <ul> list -
aria-expanded="false"
tells users whether the menu is expanded or collapsed by toggling its value betweentrue
orfalse
-
aria-autocomplete="list"
tells users that a list of options will appear
OR usearia-autocomplete="both"
if one value in the collection is automatically selected - dynamization need to complete
aria-activedescendant=""
with the ID of the selected li
Following attributes have to be added to <ul>
-
role="option"
on selectable items in the select list -
aria-live="polite"
Following attributes have to be added to <li>
-
aria-selected
tells users which option within the list is selected or not by toggling the value betweentrue
orfalse
-
aria-live="polite" role="status"
on search status
- Search for: Smart
- Smart
- Smart wifi
- Smartphone
Search with complexe autocomplete
The list used for autocomplete is set to display: none
by default. The dynamization has to be added by each team according to its own needs. Here are some usefull documentations: select your poison - Editable Combobox With Both List and Inline Autocomplete Example
The maximum height can be set via rs-maxh-xxx
combined to rs-scroll-v
(see height according to its needs.) to add a vertical scroll to the list in order to avoid having neverending lists bigger than the screen height.
Same attributes as above autocomplete have to be added.
Search with autocomplete and no result
- Your search did not yield any result. Please adapt your search criteria.
JavaScript
How to trigger the js
Each time you add Search field to the page, you have to use this JS function inception.forms(CONTEXT);
CONTEXT refers to document
or html element parent.
Deprecated
EXPIRY DATE: 30/04/2021
The search input below is not accessible and should no longer be used.
This element will no longer be available from the expiry date meaning the related css will be removed and the element design will be broken if it's not adapted to the new html.
Class:
-
rs-label
-
rs-input-collapsed
- Your search did not yield any result. Please adapt your search criteria.
Each time you add Search field to the page, you have to use this JS function
CONTEXT refers to document or html element parent.
Deprecated
The search input below is not accessible and should no longer be used.
This element will no longer be available from the expiry date meaning the related css will be removed and the element design will be broken if it's not adapted to the new html.
Class:
-
rs-label
-
rs-input-collapsed
Configuration metadata
Selector: lib-search-field
Class: SearchFieldComponent
Use case example
NOT AVAILABLE LIVE PREVIEW
Inputs
Name | Type | Default | Required | Description |
---|---|---|---|---|
config | ISearchFieldConfig | undefined | Yes | Applies configuration to the component |
isButtonDisabled | boolean | false | No | Enables/Disables the search button |
underText | string | null | No | The text shown under the search field |
isTextErrorMessage | boolean | false | No | Defines if the text is and error message or not |
suggestions | string[] | [] | No | Defines the search result proposals |
multiSelectSuggestions | ISearchSelect[] | undefined | No | Refers to the multiple selected suggestions |
inputNumberId | string | Random number produced bt Math.random | No | The id of the component |
inputType | string | search | No | Defines the input type |
searchPlaceholder | string | missing placeholder | Yes | Defines search placeholder |
inputLabel | string | Search | No | Defines the input label |
translations | ISearchFieldTranslations | { search: 'search',searchFor: 'search for',placeholder: 'placeholder' } | No | Control translations |
clearAfterSearch | boolean | true | No | Defines if the input will be cleared after submit |
isValid | boolean | false | No | Add green contour to the field |
enableWaitingDotsLoader | false | false | No | Adds the three dots indicating loading in the field |
Outputs
Name | Type | Description |
---|---|---|
submitEmitter | EventEmitter<string> | Emits when the user submits the search |
selectedValues | EventEmitter | Emits the selected value |
Models
export interface ISearchFieldConfig { showButton?: boolean; negative?: boolean; disabled?: boolean; multiSelect? : boolean; displaySerachForAutocomplete?: boolean; } export interface ISearchFieldTranslations { search?: string; searchFor?: string; placeholder: string; } export interface ISearchSelect { label: string; value: string; isSelected: boolean; }