Chips

Angular Bootstrap 5 Chips component

Responsive chips built with the latest Bootstrap 5, Angular and Material Design. 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 
        
            
            <mdb-chip>Text</mdb-chip>
            <mdb-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>
            </mdb-chip>

            <mdb-chip customClass="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>
            </mdb-chip>

            <mdb-chip customClass="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>
            </mdb-chip>

Outline

You can use customClass input and btn-outline-color classes to add outline styling to your chip.

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark 
        
            
            <mdb-chip customClass="chip-outline btn-outline-primary">
              Primary
              <i class="close fas fa-times"></i>
            </mdb-chip>
            <mdb-chip customClass="chip-outline btn-outline-secondary">
              Secondary
              <i class="close fas fa-times"></i>
            </mdb-chip>
            <mdb-chip customClass="chip-outline btn-outline-success">
              Success
              <i class="close fas fa-times"></i>
            </mdb-chip>
            <mdb-chip customClass="chip-outline btn-outline-danger">
              Danger
              <i class="close fas fa-times"></i>
            </mdb-chip>
            <mdb-chip customClass="chip-outline btn-outline-warning">
              Warnign
              <i class="close fas fa-times"></i>
            </mdb-chip>
            <mdb-chip customClass="chip-outline btn-outline-info">
              Info
              <i class="close fas fa-times"></i>
            </mdb-chip>
            <mdb-chip customClass="chip-outline btn-outline-light">
              Light
              <i class="close fas fa-times"></i>
            </mdb-chip>
            <mdb-chip customClass="chip-outline btn-outline-dark">
              Dark
              <i class="close fas fa-times"></i>
            </mdb-chip>

Placeholder

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

        
            
            <mdb-chips>
              <mdb-form-control
                class="chips-input-wrapper chips-transition"
                [class.chips-padding]="tags.length > 0"
              >
                <mdb-chip *ngFor="let tag of tags" (deleted)="delete(tag)">
                  <span class="text-chip">{{ tag.name }}</span>
                  <i class="close fas fa-times" mdbChipDelete></i>
                </mdb-chip>
                <input
                  mdbChipsInput
                  class="form-control chips-input"
                  (chipAdd)="add($event)"
                />
                <label mdbLabel class="form-label">Example label</label>
              </mdb-form-control>
            </mdb-chips>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { MdbChipAddEvent } from 'mdb-angular-ui-kit/chips';

            interface Tag {
              name: string;
            }

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
              styleUrls: ['./app.component.scss'],
            })
            export class AppComponent {
              tags: Tag[] = [];

              add(event: MdbChipAddEvent) {
                this.tags.push({ name: event.value });

                event.input.clear();
              }

              delete(tag: Tag) {
                const index = this.tags.indexOf(tag);

                if (index >= 0) {
                  this.tags.splice(index, 1);
                }
              }
            }

Initial Value

You can set initial tags by adding them to the tags array.

        
            
            <mdb-chips class="chips-initial">
              <mdb-form-control
                class="chips-input-wrapper chips-transition"
                [class.chips-padding]="tags.length > 0"
              >
                <mdb-chip *ngFor="let tag of tags" (deleted)="delete(tag)">
                  <span class="text-chip">{{ tag.name }}</span>
                  <i class="close fas fa-times" mdbChipDelete></i>
                </mdb-chip>
                <input mdbChipsInput class="form-control chips-input" (chipAdd)="add($event)" />
                <label mdbLabel class="form-label">Example label</label>
              </mdb-form-control>
            </mdb-chips>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { MdbChipAddEvent } from 'mdb-angular-ui-kit/chips';

            interface Tag {
              name: string;
            }

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
              styleUrls: ['./app.component.scss'],
            })
            export class AppComponent {
              tags: Tag[] = [
                { name: 'MDBReact' },
                { name: 'MDBAngular' },
                { name: 'MDBVue' },
                { name: 'MDB5' },
                { name: 'MDB' },
              ];

              add(event: MdbChipAddEvent) {
                this.tags.push({ name: event.value });

                event.input.clear();
              }

              delete(tag: Tag) {
                const index = this.tags.indexOf(tag);

                if (index >= 0) {
                  this.tags.splice(index, 1);
                }
              }
            }

Content Editable

You can use [editable]="true" input to make a chips content editable. 

        
            
            <mdb-chips class="chips-initial">
              <mdb-form-control
                class="chips-input-wrapper chips-transition"
                [class.chips-padding]="tags.length > 0"
              >
                <mdb-chip
                  *ngFor="let tag of tags"
                  [editable]="true"
                  (deleted)="delete(tag)"
                  (edited)="edit(tag, $event)"
                >
                  <span class="text-chip">{{ tag.name }}</span>
                  <i class="close fas fa-times" mdbChipDelete></i>
                </mdb-chip>
                <input
                  mdbChipsInput
                  class="form-control chips-input"
                  (chipAdd)="add($event)"
                />
                <label mdbLabel class="form-label">Example label</label>
              </mdb-form-control>
            </mdb-chips>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { MdbChipAddEvent } from 'mdb-angular-ui-kit/chips';

            interface Tag {
              name: string;
            }

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
              styleUrls: ['./app.component.scss'],
            })
            export class AppComponent {
              tags: Tag[] = [];

              add(event: MdbChipAddEvent) {
                this.tags.push({ name: event.value });

                event.input.clear();
              }

              delete(tag: Tag) {
                const index = this.tags.indexOf(tag);

                if (index >= 0) {
                  this.tags.splice(index, 1);
                }
              }

              edit(tag: Tag, event: MdbChipEditedEvent) {
                if (!event.value) {
                  this.delete(tag);
                  return;
                }

                const index = this.tags.indexOf(tag);

                if (index >= 0) {
                  this.tags[index].name = value;
                }
              }
            }

Chips - API

Import

        
            
        import { MdbChipsModule } from 'mdb-angular-ui-kit/chips';
        import { MdbFormsModule } from 'mdb-angular-ui-kit/forms';
        …
        @NgModule ({
          ...
          imports: [MdbChipsModule, MdbFormsModule],
          ...
        })

Inputs

MdbChipComponent

Name Type Default Description
customClass string - Allows to set custom classes for a chip
editable boolean false Allows to edit chip content.

Outputs

MdbChipInputDirective

Event type Description
chipAdd Fired on chip add when confirmation key is clicked.

MdbChipComponent

Event type Description
deleted Fired when a chip is deleted.
edited Fired after a completed chip edition. 
        
            
            <mdb-chips>
              <mdb-form-control
                class="chips-input-wrapper chips-transition"
                [class.chips-padding]="tags.length > 0"
              >
                <mdb-chip *ngFor="let tag of tags" (deleted)="delete(tag)">
                  <span class="text-chip">{{ tag.name }}</span>
                  <i class="close fas fa-times" mdbChipDelete></i>
                </mdb-chip>
                <input
                  mdbChipsInput
                  class="form-control chips-input"
                  (chipAdd)="add($event)"
                />
                <label mdbLabel class="form-label">Example label</label>
              </mdb-form-control>
            </mdb-chips>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { MdbChipAddEvent } from 'mdb-angular-ui-kit/chips';

            interface Tag {
              name: string;
            }

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
              styleUrls: ['./app.component.scss'],
            })
            export class AppComponent {
              tags: Tag[] = [];

              add(event: MdbChipAddEvent) {
                this.tags.push({ name: event.value });

                event.input.clear();
              }

              delete(tag: Tag) {
                const index = this.tags.indexOf(tag);

                if (index >= 0) {
                  this.tags.splice(index, 1);
                }
              }
            }