Search
A 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": "Bailey, Kemmer and Cummings",
    "description": "Horizontal tangible archive",
    "image": "https://s3.amazonaws.com/uifaces/faces/twitter/bowbrick/128.jpg",
    "price": "$2.64"
  },
  {
    "title": "Shanahan, Cassin and Trantow",
    "description": "Synchronised full-range open system",
    "image": "https://s3.amazonaws.com/uifaces/faces/twitter/flashmurphy/128.jpg",
    "price": "$50.76"
  },
  {
    "title": "Nienow, Nader and Lesch",
    "description": "Realigned 24/7 protocol",
    "image": "https://s3.amazonaws.com/uifaces/faces/twitter/javorszky/128.jpg",
    "price": "$80.76"
  },
  {
    "title": "Maggio and Sons",
    "description": "Versatile static workforce",
    "image": "https://s3.amazonaws.com/uifaces/faces/twitter/codepoet_ru/128.jpg",
    "price": "$40.64"
  },
  {
    "title": "Auer - Toy",
    "description": "Synchronised intangible knowledge user",
    "image": "https://s3.amazonaws.com/uifaces/faces/twitter/uberschizo/128.jpg",
    "price": "$8.70"
  }
]

Standard (Custom Render)

A search can have a custom rendering.

State
{
  "loading": false,
  "results": [],
  "value": ""
}
Options
[
  {
    "title": "Beier, Welch and Carroll",
    "description": "Face to face national function",
    "image": "https://s3.amazonaws.com/uifaces/faces/twitter/imsoper/128.jpg",
    "price": "$46.98"
  },
  {
    "title": "Fahey, Murphy and Kirlin",
    "description": "Upgradable attitude-oriented open system",
    "image": "https://s3.amazonaws.com/uifaces/faces/twitter/alessandroribe/128.jpg",
    "price": "$73.29"
  },
  {
    "title": "Zemlak LLC",
    "description": "Sharable interactive interface",
    "image": "https://s3.amazonaws.com/uifaces/faces/twitter/tur8le/128.jpg",
    "price": "$9.19"
  },
  {
    "title": "Schinner Inc",
    "description": "User-friendly background database",
    "image": "https://s3.amazonaws.com/uifaces/faces/twitter/smaczny/128.jpg",
    "price": "$49.61"
  },
  {
    "title": "Will, Olson and Weber",
    "description": "Optimized 24 hour analyzer",
    "image": "https://s3.amazonaws.com/uifaces/faces/twitter/marciotoledo/128.jpg",
    "price": "$81.92"
  }
]

Category

A search can display results from remote content ordered by categories.

State
{
  "isLoading": false,
  "results": [],
  "value": ""
}
Options
{
  "application": {
    "name": "application",
    "results": [
      {
        "title": "Stark - Nitzsche",
        "description": "Multi-channelled 3rd generation capability",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/chadengle/128.jpg",
        "price": "$25.10"
      },
      {
        "title": "Goyette, Rogahn and Quigley",
        "description": "Multi-layered leading edge paradigm",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/leemunroe/128.jpg",
        "price": "$27.08"
      },
      {
        "title": "McLaughlin and Sons",
        "description": "Monitored incremental portal",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/supervova/128.jpg",
        "price": "$41.96"
      },
      {
        "title": "Mraz, Rath and Cronin",
        "description": "Extended human-resource product",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/krasnoukhov/128.jpg",
        "price": "$51.03"
      },
      {
        "title": "Fay, Rodriguez and Quitzon",
        "description": "Future-proofed foreground array",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/lososina/128.jpg",
        "price": "$92.39"
      }
    ]
  },
  "array": {
    "name": "array",
    "results": [
      {
        "title": "Aufderhar LLC",
        "description": "Secured methodical knowledge user",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/liminha/128.jpg",
        "price": "$94.29"
      },
      {
        "title": "Powlowski, Corkery and Lakin",
        "description": "Operative 6th generation standardization",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/mohanrohith/128.jpg",
        "price": "$46.14"
      },
      {
        "title": "Brown - Greenfelder",
        "description": "Robust systemic infrastructure",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/dshster/128.jpg",
        "price": "$21.49"
      },
      {
        "title": "Prohaska, Kertzmann and Trantow",
        "description": "Object-based foreground artificial intelligence",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/S0ufi4n3/128.jpg",
        "price": "$81.40"
      },
      {
        "title": "Walsh, Quigley and Bergnaum",
        "description": "Fundamental mobile function",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/demersdesigns/128.jpg",
        "price": "$1.47"
      }
    ]
  },
  "circuit": {
    "name": "circuit",
    "results": [
      {
        "title": "Will, Koelpin and Torp",
        "description": "Intuitive eco-centric methodology",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/itskawsar/128.jpg",
        "price": "$31.37"
      },
      {
        "title": "Morar - Robel",
        "description": "Self-enabling static approach",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/saulihirvi/128.jpg",
        "price": "$8.22"
      },
      {
        "title": "Haag LLC",
        "description": "Versatile logistical customer loyalty",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/desastrozo/128.jpg",
        "price": "$24.21"
      },
      {
        "title": "Wilderman Group",
        "description": "Exclusive optimal superstructure",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/edhenderson/128.jpg",
        "price": "$89.05"
      },
      {
        "title": "Reynolds - Roob",
        "description": "Automated high-level contingency",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/tristanlegros/128.jpg",
        "price": "$41.02"
      }
    ]
  }
}

Category (Custom Render)

A category search can have a custom rendering.

State
{
  "isLoading": false,
  "results": [],
  "value": ""
}
Options
{
  "system": {
    "name": "system",
    "results": [
      {
        "title": "Bernier, Volkman and Smitham",
        "description": "Reduced dynamic internet solution",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/spbroma/128.jpg",
        "price": "$13.37"
      },
      {
        "title": "Walsh and Sons",
        "description": "Expanded systematic hub",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/bassamology/128.jpg",
        "price": "$39.74"
      },
      {
        "title": "Walsh, Luettgen and Feil",
        "description": "Profit-focused bandwidth-monitored instruction set",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/brenmurrell/128.jpg",
        "price": "$27.55"
      },
      {
        "title": "Bruen and Sons",
        "description": "Right-sized homogeneous software",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/kinday/128.jpg",
        "price": "$80.67"
      },
      {
        "title": "Gusikowski - Murphy",
        "description": "Customer-focused background success",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/mufaddal_mw/128.jpg",
        "price": "$87.80"
      }
    ]
  },
  "application": {
    "name": "application",
    "results": [
      {
        "title": "Batz and Sons",
        "description": "Synergized encompassing projection",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/fronx/128.jpg",
        "price": "$62.55"
      },
      {
        "title": "Connelly and Sons",
        "description": "Re-contextualized actuating framework",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/sebashton/128.jpg",
        "price": "$98.29"
      },
      {
        "title": "Murphy - Fahey",
        "description": "Up-sized mobile paradigm",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/thekevinjones/128.jpg",
        "price": "$78.40"
      },
      {
        "title": "Stark - Bosco",
        "description": "Up-sized executive functionalities",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/dawidwu/128.jpg",
        "price": "$69.81"
      },
      {
        "title": "Mayer - Wolf",
        "description": "Enterprise-wide discrete structure",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/haligaliharun/128.jpg",
        "price": "$8.96"
      }
    ]
  },
  "transmitter": {
    "name": "transmitter",
    "results": [
      {
        "title": "Graham, Senger and Lindgren",
        "description": "Enterprise-wide dynamic budgetary management",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/michzen/128.jpg",
        "price": "$97.16"
      },
      {
        "title": "Stehr - Romaguera",
        "description": "Intuitive non-volatile frame",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/yalozhkin/128.jpg",
        "price": "$7.51"
      },
      {
        "title": "Mosciski - Lesch",
        "description": "Networked multi-tasking data-warehouse",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/vladyn/128.jpg",
        "price": "$51.21"
      },
      {
        "title": "Hintz, Leffler and Leannon",
        "description": "Multi-lateral background solution",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/ManikRathee/128.jpg",
        "price": "$75.36"
      },
      {
        "title": "Monahan - Berge",
        "description": "Integrated radical attitude",
        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/rodnylobos/128.jpg",
        "price": "$0.87"
      }
    ]
  }
}

Variations

Fluid

A search can have its results take up the width of its container.

State
{
  "isLoading": false,
  "results": [],
  "value": ""
}
Options
[
  {
    "title": "Sanford and Sons",
    "description": "Extended composite methodology",
    "image": "https://s3.amazonaws.com/uifaces/faces/twitter/olgary/128.jpg",
    "price": "$62.98"
  },
  {
    "title": "Rempel - Jerde",
    "description": "Enterprise-wide eco-centric definition",
    "image": "https://s3.amazonaws.com/uifaces/faces/twitter/laasli/128.jpg",
    "price": "$16.81"
  },
  {
    "title": "Greenholt, Ruecker and Batz",
    "description": "Multi-layered tangible success",
    "image": "https://s3.amazonaws.com/uifaces/faces/twitter/hai_ninh_nguyen/128.jpg",
    "price": "$0.64"
  },
  {
    "title": "Sipes Inc",
    "description": "Cloned impactful contingency",
    "image": "https://s3.amazonaws.com/uifaces/faces/twitter/michaelcolenso/128.jpg",
    "price": "$70.25"
  },
  {
    "title": "Abshire and Sons",
    "description": "Fully-configurable bandwidth-monitored groupware",
    "image": "https://s3.amazonaws.com/uifaces/faces/twitter/sunlandictwin/128.jpg",
    "price": "$64.92"
  }
]

Aligned

A search can have its results aligned to its left or right container edge.

State
{
  "isLoading": false,
  "results": [],
  "value": ""
}
Options
[
  {
    "title": "Klein, Jast and Waelchi",
    "description": "Reverse-engineered dedicated core",
    "image": "https://s3.amazonaws.com/uifaces/faces/twitter/digitalmaverick/128.jpg",
    "price": "$96.51"
  },
  {
    "title": "Zemlak - Schroeder",
    "description": "Universal leading edge internet solution",
    "image": "https://s3.amazonaws.com/uifaces/faces/twitter/judzhin_miles/128.jpg",
    "price": "$59.75"
  },
  {
    "title": "McCullough, Blanda and Jacobi",
    "description": "Balanced contextually-based groupware",
    "image": "https://s3.amazonaws.com/uifaces/faces/twitter/axel/128.jpg",
    "price": "$76.19"
  },
  {
    "title": "Nolan LLC",
    "description": "Configurable object-oriented approach",
    "image": "https://s3.amazonaws.com/uifaces/faces/twitter/joshuaraichur/128.jpg",
    "price": "$68.70"
  },
  {
    "title": "Collier LLC",
    "description": "Self-enabling asynchronous time-frame",
    "image": "https://s3.amazonaws.com/uifaces/faces/twitter/ryuchi311/128.jpg",
    "price": "$81.69"
  }
]

Input

A search can receive an input via shorthand props.

This is the bottom
Blazing deployments by Vercel-Logo Vercel.