Skip to content

Search Box

Search Box component is a full-featured search experience with autocomplete and suggestions. Out of the box, the Search Box component offers the following features:

  • 🧘 Easy setup: install and configure as you need.
  • 🎨 Theming: colors, typography and styling can be customized to match your website.
  • 🫡 Autocomplete: as you type, the search box will suggest the most relevant results.
  • ✨ AI summary: the search box includes the Chat Box component, that can provide a conversational search tool featuring our Answer Engine capabilities.

Do you want to see some examples in the wild? Check out the Search Box component on this website, on the top left corner.

Installation

To install the Orama UI Components library, you can follow the instructions here.

Usage

The Search Box supports a vast number of options and configurations. You can find the full list of options and examples in the Storybook.

OptionDescriptionDefault
indexThe index configuration. An object with the endpoint and api_key properties. These are the Endpoint URL and Public API Key of your index.Required when clientInstance is not specified.
clientInstanceThe OramaClient instance to use for the search and answer engine.Required when index is not specified.
openWhether the search box is open or not. You can use a Search Button to toggle it.false
placeholderThe placeholder text for the search boxSearch...
sourceBaseUrlThe base URL for the search results.Empty
sourcesMapAn object to mapping your document properties with the ChatBox source results.{}
resultMapAn object to mapping your document properties with the SearchBox results.{}
suggestionsAn array of suggestions to display in the initial state.[]

Example

Here is a basic example of how to use the Search Box component in your application using React.

import { OramaSearchBox } from '@orama/react-components';
<OramaSearchBox
placeholder="Search something..."
index={{
endpoint: 'https://your-index-endpoint-url',
api_key: 'YOUR_PUBLIC_API_KEY'
}}
resultMap={{
title: 'name',
description: 'content',
section: 'category',
}}
/>