This package has been deprecated

Author message:

This name has a typo, instead use



TagsBox Widget

ūüé• See it Live on CodeSandbox


Demo of TagsBox Widget


This is the TagsBox Labs widget for React InstantSearch. You can use this widget to search and select tags with Algolia and use them later on for any purpose want.

This widget displays an input that will offer tag suggestions while user is typing. Tags can be then clicked to be added to the input.

This helps user to select records for another purpose than searching through them but to reuse them to complete another action later (like choosing a contact for sending an email or a category while creating a blog post for instance).

Table of Contents

Get the code

This widget comes with JavaScript but also pre-defined CSS.


You can copy and paste the JavaScript code from the repository itself, grab it in the src/lib folder and use the <Tag /> component.


You can copy and paste the necessary CSS code from the repository itself, grab it in src/lib/Tags.css.


The simplest usage is:

import { InstantSearch } from 'react-instantsearch-dom';
import TagsBox from 'instansearch-tagsbox-react';
export const SelectedTagComponent = ({ hit }) => (
export const SuggestedTagComponent = ({ hit }) => (
        {hit.firstname} {hit.lastname}
        onUpdate={(newTags, previousTags) => console.log(newTags, previousTags)}
        translations={{ placeholder: "Search…", noResult: "…" }}


You should encapsulate the <TagsBox /> component inside an <InstantSearch /> one.

To work properly, you'll need to provide three props to the component:

  • selectedTagComponent (component): describe how a selected tag should be displayed
    • receive a hit as parameter (coming from Algolia)
  • suggestedTagComponent (component): describe how a suggested tag should be displayed
    • receive a hit as parameter (coming from Algolia)
  • onUpdate (function): called each time a tag is added or removed
    • receive two parameters that represents the new tags and the previous tags. They are both arrays that respectively contains the current selected tags and the previous ones

It is possible to encapsulate the <TagBox /> component in an <Index /> one if you wish to target different indices from the same InstantSearch instance.


  • using the connectAutoComplete() connector: CodeSandbox


Name Type Use
selectedTagComponent (required) Component Describe how a selected tag should be displayed.
suggestedTagComponent (required) Component Describe how a suggested tag should be displayed.
onUpdate (required) Function Called each time a tag is added or removed.
NoResultComponent Component Describe how an no existing tag should be displayed (should be use with onAddTag prop).
onAddTag Function Called before a tag is added to manipulate the object. It takes either a hit (object) or a value (string) as parameter and should always return an object with a objectID value.
translations Object Set the placeholder and noResult translations.
limitTo Number Restrict the number of tags to select.

Implementation details

This widget is implemented using the connectAutoComplete() connector. To learn more about connectors, you can read the associated guide.


To contribute to the project, clone this repository then run:

yarn start




Package Sidebar


npm i instansearch-tagsbox-react

Weekly Downloads






Unpacked Size

29.2 kB

Total Files


Last publish


  • wwalser
  • jkaho
  • mprevell97
  • louishousiaux
  • antoine.gilles
  • eventexperiences_algolia
  • jsok_algolia
  • bhinchley-algolia
  • hugowit
  • alg-admin
  • aymeric.giraudet
  • gavinwade12
  • bhcastle
  • rishi_algolia
  • jasonberry
  • scyganek-algolia
  • drodriguln
  • abodelot
  • leviwhalen
  • sfaiqh
  • valentindotxyz
  • fluf
  • instantsearch-bot
  • taylorcjohnson_algolia
  • pjankowski5312
  • raed-algolia
  • dylantientcheu
  • catalgolia
  • morgan-algolia
  • algabet
  • andy_ds
  • bengreenbank
  • alg-bgastinne
  • daltondickalgolia
  • jcohonner-algolia
  • robertmogos
  • mariaalungu
  • emmanuel.fortin
  • ejaldorau
  • dhaya.b
  • lukyvj
  • marielaure
  • haroenv
  • rayrutjes
  • jerska
  • ronanlevesque
  • samouss
  • therealwebby
  • francoischalifour
  • jonmontane
  • tkrugg
  • seafoox
  • sylvainh
  • clemfromspace
  • lorrissaintgenez
  • broujo
  • e-krebs
  • kombucha
  • sylvain
  • crawler-team
  • amcdaid106
  • devinalgolia
  • jvenezia
  • otomatik
  • sophiem03
  • sarahdayan
  • dcoates
  • maximehuang
  • guitek
  • matthewbond
  • cyril.descossy
  • tatsuro
  • danajeremy
  • mathougui
  • xavdh
  • agdavid
  • rasemotte
  • plnech
  • shortcuts
  • praagyajoshi
  • loicsay
  • svensoldin
  • alphonseb
  • leodau
  • fabienmotte
  • sarahfranc
  • millotp