Chips

Bootstrap 5 Chips component

Responsive chips built with the latest Bootstrap 5. Chips (aka tags) make it easier to categorize content and browse ie. through different articles from the same category.

Bootstrap tags and chips categorize content with the use of text and icons. Tags and chips make it easier to browse throughout articles, comments or pages. Their main goal is to provide your visitors with an intuitive way of getting what they want. Just consider, how convenient it is to find all the articles related to web development just by using a tag.

Note: Read the API tab to find all available options and advanced customization

Basic example

Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.

Text
Contact Person John Doe
Contact Person John Doe
Contact Person John Doe

Outline

You can use outline styling with add btn-outline-color to your chip.

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Placeholder

Type a name and press enter to add a tag. Click X to remove it.

Initial Value

You can set initial tags with js options.

Content Editable

You can set content editable to add options editable to true with JavaScript or data-mdb-attributes.

If you want to support our friends from Tailwind Elements you can also check out the Tailwind chips documentation.

Chips - API

Usage

Via data attributes


      <div class="chip" data-mdb-close="true">Text</div>

      <div class="chips chips-placeholder" data-mdb-close="true"></div>
      <div class="chips chips-initial" data-mdb-close="true"></div>

Via JavaScript


      var chipsInput = new mdb.chipsInput(document.getElementById('chipsInputid'), options)

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own. 


      $('.example-class').chips(options);

Options

Name Type Default Description
tag String '' Changes button tag
inputID String '' Change input ID
parentSelector String '' Set parent selector to show chips
initialValues Array [{ tag: 'init1' }, { tag: 'init2' }] Add custom tags on init
editable Boolean false Change editable options to chips in chips-placholder or chips-initial
labelText String Example label Change label

Methods

Name Description Example
dispose Destroy chips myChips.dispose()
getInstance Static method which allows you to get the chips instance associated to a DOM element. ChipsInput.getInstance(myChips) 

      var myChips = document.getElementById('myChipsID')
      var chips = new mdb.ChipsInput(myChips)
      myChips.toggle()

Events

Name Description
add.mdb.chips This event fires start if you add chip to chips-placeholder or chips-initial
arrowDown.mdb.chips This event fires start if you click arrow down in the chips-placeholder or chips-initial
arrowLeft.mdb.chips This event fires start if you click arrow left in the chips-placeholder or chips-initial
arrowRight.mdb.chip This event fires start if you click arrow right in the chips-placeholder or chips-initial
arrowUp.mdb.chips This event fires start if you click arrow up in the chips-placeholder or chips-initial
delete.mdb.chips This event fires start if you click delete button/backspace in the chips-placeholder or chips-initial 

      var myChips = document.getElementById('myChipsID')
      myChips.addEventListener('delete.mdb.chips', function (e) {
      // do something...
      })

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component: 


          import { ChipsInput } from 'mdb-ui-kit';