Chips

Chips - Bootstrap 5 & Material Design 2.0 component

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

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.


                      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.


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

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

Chips - API

Usage

Via data attributes


                    
                      Launch modal

Via JavaScript


                    var myModal = new bootstrap.Modal(document.getElementById('myModal'), 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').ripple(options);

Options

Name	Type	Default	Description
`tag`	String	`'button'`	Changes button tag

Methods

Name	Description	Example
`dispose`	Destroy chips	`myModal.dispose()`


                    var myModalEl = document.getElementById('myModal')
                    var modal = new mdb.Modal(myModalEl)
                    modal.toggle()

Events

Name	Description
`show.bs.modal`	This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.


                    var myModalEl = document.getElementById('myModal')
                    myModalEl.addEventListener('show.bs.modal', function (e) {
                    // do something...
                    })

Import

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


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