Search Field Stable Dark theme
The Search Field is an input that initiates a search on submission.
<uimc-searchfield
>
</uimc-searchfield>| Attribute | Description | Values | Default |
|---|---|---|---|
| theme | Sets the background-color | light, gray, dark | light |
| data | Defines optional words for autocompletion | Array of Strings | – |
| placeholder | Sets the placeholder text | String | – |
| prefix | Disables the default search icon on the left | search, none | search |
| disabled | Disables interaction on this element | – | – |
| theme | Set the color scheme of the component | light, gray, dark | light |
| Callback | Argument | Description |
|---|---|---|
| onInput | event | Callback function that track changes as they type |
| onChange | event | Callback 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>Dark theme
<uimc-searchfield theme="dark"
placeholder="Search…"
>
</uimc-searchfield>