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
Edit in sandbox 
        
            
            <div class="chip" data-mdb-close="true">Text</div>
            <div class="chip">
              <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp" alt="Contact Person" />
              John Doe
              <i class="close fas fa-times"></i>
            </div>

            <div class="chip chip-md">
              <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp" alt="Contact Person" />
              John Doe
              <i class="close fas fa-times"></i>
            </div>

            <div class="chip chip-lg">
              <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp" alt="Contact Person" />
              John Doe
              <i class="close fas fa-times"></i>
            </div>

Outline

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

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Edit in sandbox 
        
            
            <div class="chip chip-outline btn-outline-primary" data-mdb-ripple-color="dark">
              Primary
              <i class="close fas fa-times"></i>
            </div>
            <div class="chip chip-outline btn-outline-secondary" data-mdb-ripple-color="dark">
              Secondary
              <i class="close fas fa-times"></i>
            </div>
            <div class="chip chip-outline btn-outline-success" data-mdb-ripple-color="dark">
              Success 
              <i class="close fas fa-times"></i>
            </div>
            <div class="chip chip-outline btn-outline-danger" data-mdb-ripple-color="dark">
              Danger
              <i class="close fas fa-times"></i>
            </div>
            <div class="chip chip-outline btn-outline-warning" data-mdb-ripple-color="dark">
              Warning
              <i class="close fas fa-times"></i>
            </div>
            <div class="chip chip-outline btn-outline-info" data-mdb-ripple-color="dark">
              Info
              <i class="close fas fa-times"></i>
            </div>
            <div class="chip chip-outline btn-outline-light" data-mdb-ripple-color="dark">
              Light
              <i class="close fas fa-times"></i>
            </div>
            <div class="chip chip-outline btn-outline-dark" data-mdb-ripple-color="dark">
              Dark
              <i class="close fas fa-times"></i>
            </div>

Placeholder

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

Edit in sandbox 
        
            
            <div class="chips chips-placeholder"></div>

Initial Value

You can set initial tags with js options.

Edit in sandbox 
        
            
            <div class="chips-test chips-initial"></div>
          
        
    
        
            
            const chipsInitialNew = document.querySelector('.chips-test')

            const newChipsNew = new mdb.ChipsInput(chipsInitialNew, {
              initialValues: [
                { tag: 'MDBReact' },
                { tag: 'MDBAngular' },
                { tag: 'MDBVue' },
                { tag: 'MDB5' },
                { tag: 'MDB' }
              ]
            })

Content Editable

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

Edit in sandbox 
        
            
            <div class="chips chips-placeholder" data-mdb-editable="true"></div>
          
        
    
        
            
            const chipsInitial = document.querySelector('.chips-test')

            const newChips = new mdb.ChipsInput(chipsInitial, {
              editable: true
            })

Chips - API

Usage

Via data attributes

Edit in sandbox 
        
            
          <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

Edit in sandbox 
        
            
          const 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.

Edit in sandbox 
        
            
          $('.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)
getOrCreateInstance Static method which returns the chips instance associated to a DOM element or create a new one in case it wasn't initialized. ChipsInput.getOrCreateInstance(myChips)
Edit in sandbox 
        
            
          const myChips = document.getElementById('myChipsID')
          const 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
Edit in sandbox 
        
            
          const myChips = document.getElementById('myChipsID')
          myChips.addEventListener('delete.mdb.chips', (e) => {
            // do something...
          })

Import

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

Edit in sandbox 
        
            
          import { ChipsInput } from 'mdb-ui-kit';