Semantic UI React 2.0.3src/modules/Search/Search.jsSearchA search module allows a user to query for results from a selection of data
Types
Standard
A search can display a set of results.
State
{
"loading": false,
"results": [],
"value": ""
}Options
[
{
"title": "Kirlin - Walker",
"description": "Open-source well-modulated focus group",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/derienzo777/128.jpg",
"price": "$52.55"
},
{
"title": "Luettgen - Haag",
"description": "Advanced executive system engine",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/sangdth/128.jpg",
"price": "$84.18"
},
{
"title": "Lesch - Grimes",
"description": "Stand-alone context-sensitive extranet",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/msveet/128.jpg",
"price": "$96.06"
},
{
"title": "Williamson, Nolan and Toy",
"description": "Fundamental reciprocal info-mediaries",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/jm_denis/128.jpg",
"price": "$9.03"
},
{
"title": "Reynolds - Macejkovic",
"description": "Networked solution-oriented algorithm",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/abdullindenis/128.jpg",
"price": "$23.87"
}
]Standard (Custom Render)
A search can have a custom rendering.
State
{
"loading": false,
"results": [],
"value": ""
}Options
[
{
"title": "Goodwin, Pacocha and Jaskolski",
"description": "Customizable next generation local area network",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/mateaodviteza/128.jpg",
"price": "$14.74"
},
{
"title": "Adams Group",
"description": "Persevering human-resource synergy",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/d_nny_m_cher/128.jpg",
"price": "$8.66"
},
{
"title": "Homenick and Sons",
"description": "Devolved global core",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/alessandroribe/128.jpg",
"price": "$90.77"
},
{
"title": "Wilderman - McKenzie",
"description": "Stand-alone object-oriented circuit",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/olgary/128.jpg",
"price": "$66.87"
},
{
"title": "Kautzer - Koss",
"description": "Front-line impactful utilisation",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/YoungCutlass/128.jpg",
"price": "$70.29"
}
]Category
A search can display results from remote content ordered by categories.
State
{
"isLoading": false,
"results": [],
"value": ""
}Options
{
"pixel": {
"name": "pixel",
"results": [
{
"title": "Stehr and Sons",
"description": "Sharable systematic instruction set",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/soyjavi/128.jpg",
"price": "$90.40"
},
{
"title": "Weissnat - Sporer",
"description": "Focused full-range adapter",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/sachacorazzi/128.jpg",
"price": "$60.24"
},
{
"title": "D'Amore, Predovic and Swift",
"description": "Reactive human-resource policy",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/mattsapii/128.jpg",
"price": "$52.66"
},
{
"title": "Rau, Jerde and Davis",
"description": "Ergonomic static parallelism",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/sovesove/128.jpg",
"price": "$38.35"
},
{
"title": "Bruen, Effertz and Blanda",
"description": "Exclusive static initiative",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/nvkznemo/128.jpg",
"price": "$21.93"
}
]
},
"driver": {
"name": "driver",
"results": [
{
"title": "Hansen - Schmidt",
"description": "Monitored scalable Graphical User Interface",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/jjshaw14/128.jpg",
"price": "$41.44"
},
{
"title": "Steuber, Price and Simonis",
"description": "Streamlined client-server paradigm",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/melvindidit/128.jpg",
"price": "$1.76"
},
{
"title": "Stiedemann - Pagac",
"description": "Extended bi-directional internet solution",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/mhudobivnik/128.jpg",
"price": "$17.03"
},
{
"title": "Schuster, Hoeger and Welch",
"description": "Configurable disintermediate hierarchy",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/nemanjaivanovic/128.jpg",
"price": "$45.40"
},
{
"title": "Stiedemann - Schaefer",
"description": "Advanced well-modulated firmware",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/meln1ks/128.jpg",
"price": "$30.50"
}
]
},
"protocol": {
"name": "protocol",
"results": [
{
"title": "Dare LLC",
"description": "Profound dynamic approach",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/andytlaw/128.jpg",
"price": "$94.58"
},
{
"title": "Hessel - Cormier",
"description": "Function-based hybrid intranet",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/jnmnrd/128.jpg",
"price": "$49.10"
},
{
"title": "Tremblay, Muller and Stoltenberg",
"description": "Expanded 24 hour portal",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/emsgulam/128.jpg",
"price": "$70.31"
},
{
"title": "Grant and Sons",
"description": "Multi-lateral bi-directional software",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/akmalfikri/128.jpg",
"price": "$3.58"
},
{
"title": "Becker, Windler and King",
"description": "De-engineered transitional open system",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/illyzoren/128.jpg",
"price": "$56.03"
}
]
}
}Category (Custom Render)
A category search can have a custom rendering.
State
{
"isLoading": false,
"results": [],
"value": ""
}Options
{
"card": {
"name": "card",
"results": [
{
"title": "Franecki - Rohan",
"description": "Profound incremental challenge",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/ashocka18/128.jpg",
"price": "$85.82"
},
{
"title": "Lockman and Sons",
"description": "Public-key needs-based service-desk",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/supervova/128.jpg",
"price": "$7.41"
},
{
"title": "Weimann Inc",
"description": "Ameliorated foreground time-frame",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/chadami/128.jpg",
"price": "$81.50"
},
{
"title": "Gislason LLC",
"description": "Extended exuding emulation",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/s4f1/128.jpg",
"price": "$94.10"
},
{
"title": "Roob and Sons",
"description": "Centralized heuristic synergy",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/jonsgotwood/128.jpg",
"price": "$96.71"
}
]
},
"application": {
"name": "application",
"results": [
{
"title": "Waters Inc",
"description": "Digitized local concept",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/umurgdk/128.jpg",
"price": "$45.81"
},
{
"title": "Doyle, Gorczany and Brakus",
"description": "Right-sized 3rd generation budgetary management",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg",
"price": "$15.51"
},
{
"title": "Durgan, Littel and Heidenreich",
"description": "Fully-configurable responsive parallelism",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/illyzoren/128.jpg",
"price": "$85.75"
},
{
"title": "Kuvalis LLC",
"description": "Expanded full-range frame",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/yigitpinarbasi/128.jpg",
"price": "$9.54"
},
{
"title": "Klocko Group",
"description": "Distributed uniform circuit",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/gofrasdesign/128.jpg",
"price": "$4.04"
}
]
},
"program": {
"name": "program",
"results": [
{
"title": "Schumm Group",
"description": "Managed foreground success",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/jasonmarkjones/128.jpg",
"price": "$56.03"
},
{
"title": "Osinski, Cartwright and Bergstrom",
"description": "Polarised content-based capability",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/kolsvein/128.jpg",
"price": "$92.82"
},
{
"title": "Beer Inc",
"description": "Intuitive well-modulated benchmark",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/Chakintosh/128.jpg",
"price": "$54.93"
},
{
"title": "Wilkinson LLC",
"description": "Front-line national toolset",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/edhenderson/128.jpg",
"price": "$9.22"
},
{
"title": "Huel, Willms and Dickinson",
"description": "Assimilated 6th generation open architecture",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/smenov/128.jpg",
"price": "$76.13"
}
]
}
}Variations
Fluid
A search can have its results take up the width of its container.
State
{
"isLoading": false,
"results": [],
"value": ""
}Options
[
{
"title": "Bashirian LLC",
"description": "Managed context-sensitive adapter",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/low_res/128.jpg",
"price": "$53.32"
},
{
"title": "Wisozk, Harris and O'Connell",
"description": "Pre-emptive homogeneous knowledge base",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/charliegann/128.jpg",
"price": "$23.44"
},
{
"title": "Reichel - Zboncak",
"description": "Fundamental executive open system",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/thimo_cz/128.jpg",
"price": "$79.75"
},
{
"title": "Kreiger - Hudson",
"description": "Persistent stable product",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/angelcreative/128.jpg",
"price": "$14.05"
},
{
"title": "Hermann LLC",
"description": "Open-source coherent data-warehouse",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/javorszky/128.jpg",
"price": "$98.36"
}
]Aligned
A search can have its results aligned to its left or right container edge.
State
{
"isLoading": false,
"results": [],
"value": ""
}Options
[
{
"title": "Heathcote - Runte",
"description": "Total web-enabled alliance",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/thimo_cz/128.jpg",
"price": "$76.16"
},
{
"title": "Littel - Dooley",
"description": "Visionary zero tolerance forecast",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/beshur/128.jpg",
"price": "$60.37"
},
{
"title": "Durgan, Larson and Beatty",
"description": "Intuitive cohesive secured line",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/tbakdesigns/128.jpg",
"price": "$67.22"
},
{
"title": "Ryan Inc",
"description": "Future-proofed responsive framework",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/angelceballos/128.jpg",
"price": "$56.68"
},
{
"title": "Walter LLC",
"description": "Reactive solution-oriented forecast",
"image": "https://s3.amazonaws.com/uifaces/faces/twitter/kostaspt/128.jpg",
"price": "$66.95"
}
]Input
A search can receive an input via shorthand props.
This is the bottom
Blazing deployments by 
Vercel.
Vercel.