OS Search

OutSystems
1

Search Input with submit and cancel triggers.

Libraries

Bootstrap

HTML Code

How to Implement

This component starts in the .os-search div, and it is in this div that classes for margin and grid should be placed.

This search will occupy the entire width of its parent.

The text that indicates the subject of the input must be placed on the label and its "for" attribute must be populated with the input id. This label is not visible, it only serves to identify the field to screen readers.

In the input the placeholder text and a unique id must be placed.

On the button with the class os-search__btn - submit put text that indicates the action of this button and put the same text inside its span. Do the same for the cancel button (.os-search__btn - cancel).

As for the actions:

  • When content is added to the input the cancel button is made available, and when the input is empty it disappears again.
  • The search is triggered when:
    • the user clicks on the submission button;
    • the user presses enter;
    • when the window is wider than 992px and the user types 3 or more letters. In this case it is only triggered if there is a pause of 1000 milliseconds between characters.

Tasks Front End

DMW-1388

Tasks Back End

NA

Tasks details

NA

Views Path

Component Variations

Default


How to use

NA

Undeveloped Options

NA

Example page

Figma Link