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

John Doe

Show code Edit in sandbox

HTML

        
            
            <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

Show code Edit in sandbox

HTML

        
            
            <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.

Show code Edit in sandbox

HTML

        
            
            <div class="chips chips-placeholder"></div>

Initial Value

You can set initial tags with js options.

Show code Edit in sandbox

HTML
JavaScript

        
            
            <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.

Show code Edit in sandbox

HTML

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

Chips - API

Usage

Via data attributes

Show code Edit in sandbox

HTML

        
            
          <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

Show code Edit in sandbox

JavaScript

        
            
          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.

Show code Edit in sandbox

JavaScript

        
            
          $(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-editable="true".

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)`

Show code Edit in sandbox

JavaScript

        
            
          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

Show code Edit in sandbox

JavaScript

        
            
          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:

Show code Edit in sandbox

JavaScript

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

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.

Show code Edit in sandbox

        
            
        // .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

Show code Edit in sandbox

SCSS

        
            
        $chip-height: 32px;
        $chip-md-height: 42px;
        $chip-lg-height: 52px;
        $chip-font-size: 13px;
        $chip-font-weight: 400;
        $chip-font-color: $body-color;
        $chip-line-height: 2;
        $chip-padding-right: 12px;
        $chip-br: 16px;
        $chip-md-br: 21px;
        $chip-lg-br: 26px;
        $chip-bg: #eceff1;
        $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: #afafaf;
        $chip-icon-hover-color: #8b8b8b;
        $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: #b2b3b4;
        
        $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;

Chips

Bootstrap 5 Chips component

Basic example

Outline

Placeholder

Initial Value

Content Editable

Related resources

Chips - API

Usage

Via data attributes

Via JavaScript

Via jQuery

Options

Methods

Events

Import

CSS variables

SCSS variables