Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Search fields

See deprecated code
expiry date: 30/04/2021

Search allows users to specify a word or a phrase to find relevant result without the use of navigation.

last modified: 08/06/2022 11:20:05

Types

  1. 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.
  2. 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.
Are you building a form with several components?

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

Input field states

For all the input field states info, please refer to the text field article.

  1. Default state
    State visible before click. Field and label are displayed. No user input yet.
  2. Active state
    State visible when the field is focused.

  3. 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

  1. Text field state
    Allows users to open the options panel. For more info about the field, check out the text field article.
  2. 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.
  3. Suggestions panel
    The suggestion panel open when the user start typing, this panel contains all the the items that the system found.
  4. 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

  1. Text field state
    Allows users to open the options panel. For more info about the field, check out the text field article.
  2. 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.
  3. 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.
last modified: 08/06/2022 11:20:05

Sizes and colors

last modified: 05/05/2023 15:50:04

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.

Accessibility

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.

This is an error message

Search with helper text

Accessibility

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.

Helper text

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 poisonNew window - Editable Combobox With Both List and Inline Autocomplete ExampleNew window

Astuce with overlayer

In overlayer, use a gridding columns small-12 medium-11 around.

Accessibility

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 between true or false
  • aria-autocomplete="list" tells users that a list of options will appear
    OR use aria-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 between true or false
  • 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 poisonNew window - Editable Combobox With Both List and Inline Autocomplete ExampleNew window

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.

Accessibility

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
last modified: 24/05/2023 15:40:08

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;
        }