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

Required ES init: ChipsInput *
* UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using MDBootstrap ES format then you should pass the required components to the initMDB method.

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
        
            
            <div class="chip" data-mdb-chip-init data-mdb-close="true">Text</div>
            <div class="chip" data-mdb-chip-init>
              <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" data-mdb-chip-init>
              <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" data-mdb-chip-init>
              <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>
          
        
    
        
            
            // Initialization for ES Users
            import { Chip, initMDB } from "mdb-ui-kit";

            initMDB({ Chip });
          
        
    

Outline

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

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
        
            
            <div class="chip chip-outline btn-outline-primary" data-mdb-chip-init data-mdb-ripple-color="dark">
              Primary
              <i class="close fas fa-times"></i>
            </div>
            <div class="chip chip-outline btn-outline-secondary" data-mdb-chip-init data-mdb-ripple-color="dark">
              Secondary
              <i class="close fas fa-times"></i>
            </div>
            <div class="chip chip-outline btn-outline-success" data-mdb-chip-init data-mdb-ripple-color="dark">
              Success 
              <i class="close fas fa-times"></i>
            </div>
            <div class="chip chip-outline btn-outline-danger" data-mdb-chip-init data-mdb-ripple-color="dark">
              Danger
              <i class="close fas fa-times"></i>
            </div>
            <div class="chip chip-outline btn-outline-warning" data-mdb-chip-init data-mdb-ripple-color="dark">
              Warning
              <i class="close fas fa-times"></i>
            </div>
            <div class="chip chip-outline btn-outline-info" data-mdb-chip-init data-mdb-ripple-color="dark">
              Info
              <i class="close fas fa-times"></i>
            </div>
            <div class="chip chip-outline btn-outline-light" data-mdb-chip-init data-mdb-ripple-color="dark">
              Light
              <i class="close fas fa-times"></i>
            </div>
            <div class="chip chip-outline btn-outline-dark" data-mdb-chip-init data-mdb-ripple-color="dark">
              Dark
              <i class="close fas fa-times"></i>
            </div>
          
        
    
        
            
            // Initialization for ES Users
            import { Chip, initMDB } from "mdb-ui-kit";

            initMDB({ Chip });
          
        
    

Placeholder

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

        
            
            <div class="chips chips-placeholder chips-input" data-mdb-chips-input-init></div>
          
        
    
        
            
            // Initialization for ES Users
            import { ChipsInput, initMDB } from "mdb-ui-kit";

            initMDB({ ChipsInput });
          
        
    

Initial Value

You can set initial tags with js options.

        
            
            <div class="chips-test chips-initial"></div>
          
        
    
        
            
            // Initialization for ES Users
            import { ChipsInput, initMDB } from "mdb-ui-kit";
            initMDB({ ChipsInput });

            const chipsInitialNew = document.querySelector('.chips-test')

            const newChipsNew = new ChipsInput(chipsInitialNew, {
              initialValues: [
                { tag: 'MDBReact' },
                { tag: 'MDBAngular' },
                { tag: 'MDBVue' },
                { tag: 'MDB5' },
                { tag: 'MDB' }
              ]
            })
          
        
    
        
            
          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.

        
            
            <div class="chips chips-placeholder" data-mdb-chips-input-init data-mdb-editable="true"></div>
          
        
    
        
            
            // Initialization for ES Users
            import { ChipsInput, initMDB } from "mdb-ui-kit";

            initMDB({ ChipsInput });
          
        
    

Chips - API


Import

Importing components depends on how your application works. If you intend to use the MDBootstrap ES format, you must first import the component and then initialize it with the initMDB method. If you are going to use the UMD format, just import the mdb-ui-kit package.

        
            
          import { Chip, ChipsInput, initMDB } from "mdb-ui-kit";
          
          initMDB({ Chip, ChipsInput });
        
        
    
        
            
          import "mdb-ui-kit"
        
        
    

Usage

Via data attributes

Using the Datatable component doesn't require any additional JavaScript code - simply add data-mdb-chips-input-init attribute to wrapper div and use other data attributes to set all options. For ES format, you must first import and call the initMDB method.

        
            
          <div class="chip" data-mdb-chip-init data-mdb-close="true">Text</div>
          <div class="chips chips-placeholder" data-mdb-chips-input-init data-mdb-close="true"></div>
          <div class="chips chips-initial" data-mdb-chips-input-init data-mdb-close="true"></div>
        
        
    

Via JavaScript

        
            
          const chipElement = document.querySelector('.chip');
          const chipsInputElement = document.querySelector('.chips');

          const chip = new Chip(chipElement, options);
          const chipsInput = new ChipsInput(chipsInputElement, options);
          
        
    
        
            
          const chipElement = document.querySelector('.chip');
          const chipsInputElement = document.querySelector('.chips');

          const chip = new mdb.Chip(chipElement, options);
          const chipsInput = new mdb.ChipsInput(chipsInputElement, options);
        
        
    

Via jQuery

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

        
            
          $(document).ready(() => {
            $('.example-class').chips(options);
          });
        
        
    

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-parent-selector="".

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)
        
            
          const myChips = document.getElementById('myChipsID')
          const chips = new ChipsInput(myChips)
          myChips.dispose()
        
        
    
        
            
          const myChips = document.getElementById('myChipsID')
          const chips = new mdb.ChipsInput(myChips)
          myChips.dispose()
        
        
    

Events

Name Description
add.mdb.chips This event is triggered when you add a new chip to the chips input. Using e.preventDefault() enables adding custom validation.
added.mdb.chips This event is triggered after a new chip is added to the chips input. You can access added chips value in the listener's handler using event.value
arrowDown.mdb.chips This event is triggered when you click the down arrow in the chips input.
arrowLeft.mdb.chips This event is triggered when you click left arrow in the chips input.
arrowRight.mdb.chip This event is triggered when you click right arrow in the chips input.
arrowUp.mdb.chips This event is triggered when you click up arrow in the chips input.
delete.mdb.chips This event is triggered when you click delete button/backspace in the chips input.
        
            
          const myChips = document.getElementById('myChipsID')
          myChips.addEventListener('delete.mdb.chips', (e) => {
            // do something...
          })
        
        
    

CSS variables

As part of MDB’s evolving CSS variables approach, chips now uses local CSS variables on .chip and .chips for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

        
            
        // .chip
        --#{$prefix}chip-height: #{$chip-height};
        --#{$prefix}chip-line-height: #{$chip-line-height};
        --#{$prefix}chip-padding-right: #{$chip-padding-right};
        --#{$prefix}chip-margin-y: #{$chip-margin-y};
        --#{$prefix}chip-margin-right: #{$chip-margin-right};
        --#{$prefix}chip-font-size: #{$chip-font-size};
        --#{$prefix}chip-font-weight: #{$chip-font-weight};
        --#{$prefix}chip-font-color: #{$chip-font-color};
        --#{$prefix}chip-bg: #{$chip-bg};
        --#{$prefix}chip-border-radius: #{$chip-br};
        --#{$prefix}chip-transition-opacity: #{$chip-transition-opacity};
        --#{$prefix}chip-img-margin-right: #{$chip-img-margin-right};
        --#{$prefix}chip-img-margin-left: #{$chip-img-margin-left};
        --#{$prefix}chip-close-padding-left: #{$chip-close-padding-left};
        --#{$prefix}chip-close-font-size: #{$chip-close-font-size};
        --#{$prefix}chip-close-opacity: #{$chip-close-opacity};
        --#{$prefix}chip-outline-border-width: #{$chip-outline-border-width};
        --#{$prefix}chip-md-height: #{$chip-md-height};
        --#{$prefix}chip-md-br: #{$chip-md-br};
        --#{$prefix}chip-lg-height: #{$chip-lg-height};
        --#{$prefix}chip-lg-br: #{$chip-lg-br};
        --#{$prefix}chip-contenteditable-border-width: #{$chip-contenteditable-border-width};
        --#{$prefix}chip-contenteditable-border-color: #{$chip-contenteditable-border-color};
        --#{$prefix}chip-icon-color: #{$chip-icon-color};
        --#{$prefix}chip-icon-transition: #{$chip-icon-transition};
        --#{$prefix}chip-icon-hover-color: #{$chip-icon-hover-color};

        // .chips
        --#{$prefix}chips-min-height: #{$chips-min-height};
        --#{$prefix}chips-padding-bottom: #{$chips-padding-bottom};
        --#{$prefix}chips-margin-bottom: #{$chips-margin-bottom};
        --#{$prefix}chips-transition: #{$chips-transition};
        --#{$prefix}chips-padding-padding: #{$chips-padding-padding};
        --#{$prefix}chips-input-width: #{$chips-input-width};
        
        
    

SCSS variables

        
            
        $chip-height: 32px;
        $chip-md-height: 42px;
        $chip-lg-height: 52px;
        $chip-font-size: 13px;
        $chip-font-weight: 400;
        $chip-font-color: var(--#{$prefix}surface-color);
        $chip-line-height: 2;
        $chip-padding-right: 12px;
        $chip-br: 16px;
        $chip-md-br: 21px;
        $chip-lg-br: 26px;
        $chip-bg: var(--#{$prefix}tertiary-bg);
        $chip-margin-y: 5px;
        $chip-margin-right: 1rem;
        $chip-transition-opacity: 0.3s linear;
        $chip-img-margin-right: 8px;
        $chip-img-margin-left: -12px;
        $chip-icon-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.3);
        $chip-icon-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.4);
        $chip-icon-transition: 0.2s ease-in-out;
        $chip-outline-border-width: 1px;
        $chip-close-font-size: 16px;
        $chip-close-line-height: $chip-height;
        $chip-close-padding-left: 8px;
        $chip-close-opacity: 0.53;
        $chip-contenteditable-border-width: 3px;
        $chip-contenteditable-border-color: var(--#{$prefix}border-color);
        
        $chips-margin-bottom: 30px;
        $chips-min-height: 45px;
        $chips-padding-bottom: 1rem;
        $chips-input-font-color: $body-color;
        $chips-input-font-size: 13px;
        $chips-input-font-weight: 500;
        $chips-input-height: $chip-height;
        $chips-input-margin-right: 20px;
        $chips-input-line-height: $chip-height;
        $chips-input-width: 150px;
        $chips-transition: 0.3s ease;
        $chips-focus-box-shadow: 0.3s ease;
        $chips-padding-padding: 5px;