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
John Doe
John Doe
John Doe
<div class="chip" data-mdb-chip-init data-mdb-close-icon="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="".
The img attribute should be pinned to the single Chip
| Name | Type | Default | Description |
|---|---|---|---|
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-placeholder or chips-initial |
labelText |
String | Example label |
Change label |
closeIcon |
Boolean | false |
Add close button to the single chip. |
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;