UI MarCom 3

Search Field Stable Dark theme

The Search Field is an input that initiates a search on submission.

<uimc-searchfield 
>
</uimc-searchfield>

AttributeDescriptionValuesDefault
themeSets the background-colorlight, gray, darklight
dataDefines optional words for autocompletionArray of Strings
placeholderSets the placeholder text
prefixDisables the default search icon on the leftsearch, nonesearch
disabledDisables interaction on this element

CallbackArgumentDescription
onInputeventCallback function that track changes as they type
onChangeeventCallback function that gets triggered on blur when input has changed

Standard Search Field

<uimc-searchfield 
  placeholder="Search…"
>
</uimc-searchfield>

Full-width Search Field

<uimc-searchfield 
  placeholder="Search…"
  class="width-100"
>
</uimc-searchfield>

Search Field with a list of suggestions

<uimc-searchfield 
  placeholder="Search…"
  open
  data='["Menu Item 1", "Menu Item 2", "Menu Item 3", "Menu Item 4", "Menu Item 5"]'
>
</uimc-searchfield>