Search

Search Bar, search your app and make selections.

Search Gif

Usage

import { Search } from @motor-js/core
//...
<Search />

Props

PropDescriptionOptions / Example
sizesize of the selections boxoneOf
'tiny'
'small'
'medium'
'large'
'xlarge'
widthwidth of the selections boxstring
'100%'
marginmargin around the selections boxstring
'5px'
dropHeightheight of the search dropdownstring
'250px'

Examples

Simple Search example

function SearchTest() {
return (
<Motor config={config}>
<Search />
</Motor>
);
}

Theme API

search

Settings in search are below:

e.g. search.color.background = 'brand'

SettingDescriptionOptions / Example
colorsearch.color
backgroundsearch background colorstring
fontfont colorstring
placeholderplaceholder font colorstring
iconicon colorstring
titlesearch.title
bordertitle borderstring
borderColortitle border colorstring
radiustitle border radiusstring
suggestionssearch.suggestions
borderBottomsuggestions drodown bottom borderstring
hoverColorhover color of suggestion itemsstring
titleColorsuggestions title (dimension name) colorstring
valueColorsuggestions value colorstring