Search

Search Bar, search your app and make selections.

Usage

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

Props

Prop	Description	Options / Example
size	size of the selections box	oneOf 'tiny' 'small' 'medium' 'large' 'xlarge'
width	width of the selections box	string '100%'
margin	margin around the selections box	string '5px'
dropHeight	height of the search dropdown	string '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'

Setting	Description	Options / Example
color	search.color
background	search background color	string
font	font color	string
placeholder	placeholder font color	string
icon	icon color	string
title	search.title
border	title border	string
borderColor	title border color	string
radius	title border radius	string
suggestions	search.suggestions
borderBottom	suggestions drodown bottom border	string
hoverColor	hover color of suggestion items	string
titleColor	suggestions title (dimension name) color	string
valueColor	suggestions value color	string