From cc5c4524512b89c0834c4f8454bee81e70bb81eb Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 25 Nov 2020 11:01:35 +0300
Subject: [PATCH] Fixed #673 - Chips mode for MultiSelect

---
 public/themes/arya-blue/theme.css             | 14 +++++++
 public/themes/arya-green/theme.css            | 14 +++++++
 public/themes/arya-orange/theme.css           | 14 +++++++
 public/themes/arya-purple/theme.css           | 14 +++++++
 public/themes/bootstrap4-dark-blue/theme.css  | 14 +++++++
 .../themes/bootstrap4-dark-purple/theme.css   | 14 +++++++
 public/themes/bootstrap4-light-blue/theme.css | 14 +++++++
 .../themes/bootstrap4-light-purple/theme.css  | 14 +++++++
 public/themes/fluent-light/theme.css          | 14 +++++++
 public/themes/luna-amber/theme.css            | 14 +++++++
 public/themes/luna-blue/theme.css             | 14 +++++++
 public/themes/luna-green/theme.css            | 14 +++++++
 public/themes/luna-pink/theme.css             | 14 +++++++
 public/themes/md-dark-deeppurple/theme.css    | 38 +++++++++++++++++++
 public/themes/md-dark-indigo/theme.css        | 38 +++++++++++++++++++
 public/themes/md-light-deeppurple/theme.css   | 38 +++++++++++++++++++
 public/themes/md-light-indigo/theme.css       | 38 +++++++++++++++++++
 public/themes/mdc-dark-deeppurple/theme.css   | 38 +++++++++++++++++++
 public/themes/mdc-dark-indigo/theme.css       | 38 +++++++++++++++++++
 public/themes/mdc-light-deeppurple/theme.css  | 38 +++++++++++++++++++
 public/themes/mdc-light-indigo/theme.css      | 38 +++++++++++++++++++
 public/themes/nova-accent/theme.css           | 14 +++++++
 public/themes/nova-alt/theme.css              | 14 +++++++
 public/themes/nova-vue/theme.css              | 14 +++++++
 public/themes/nova/theme.css                  | 14 +++++++
 public/themes/rhea/theme.css                  | 14 +++++++
 public/themes/saga-blue/theme.css             | 14 +++++++
 public/themes/saga-green/theme.css            | 14 +++++++
 public/themes/saga-orange/theme.css           | 14 +++++++
 public/themes/saga-purple/theme.css           | 14 +++++++
 public/themes/vela-blue/theme.css             | 14 +++++++
 public/themes/vela-green/theme.css            | 14 +++++++
 public/themes/vela-orange/theme.css           | 14 +++++++
 public/themes/vela-purple/theme.css           | 14 +++++++
 src/components/multiselect/MultiSelect.vue    | 37 ++++++++++++++++--
 src/views/multiselect/MultiSelectDemo.vue     |  8 +++-
 src/views/multiselect/MultiSelectDoc.vue      | 16 +++++++-
 37 files changed, 722 insertions(+), 7 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index fb120681b..bd3ca34ea 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -916,6 +916,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: rgba(255, 255, 255, 0.6);
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: rgba(100, 181, 246, 0.16);
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 3px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: rgba(255, 255, 255, 0.6);
@@ -927,6 +937,10 @@
   border-color: #ef9a9a;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
 .p-multiselect-panel {
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 29ab61abb..0d77fcd0d 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -916,6 +916,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: rgba(255, 255, 255, 0.6);
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: rgba(129, 199, 132, 0.16);
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 3px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: rgba(255, 255, 255, 0.6);
@@ -927,6 +937,10 @@
   border-color: #ef9a9a;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
 .p-multiselect-panel {
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 17717903e..fb10c07ed 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -916,6 +916,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: rgba(255, 255, 255, 0.6);
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: rgba(255, 213, 79, 0.16);
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 3px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: rgba(255, 255, 255, 0.6);
@@ -927,6 +937,10 @@
   border-color: #ef9a9a;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
 .p-multiselect-panel {
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index cfd659492..5a3fee80c 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -916,6 +916,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: rgba(255, 255, 255, 0.6);
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: rgba(186, 104, 200, 0.16);
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 3px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: rgba(255, 255, 255, 0.6);
@@ -927,6 +937,10 @@
   border-color: #ef9a9a;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
 .p-multiselect-panel {
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index ec71ab428..1bf7f843c 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -920,6 +920,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: rgba(255, 255, 255, 0.6);
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.25rem 0.75rem;
+  margin-right: 0.5rem;
+  background: #8dd0ff;
+  color: #151515;
+  border-radius: 4px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: rgba(255, 255, 255, 0.6);
@@ -931,6 +941,10 @@
   border-color: #f19ea6;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.25rem 0.75rem;
+}
+
 .p-multiselect-panel {
   background: #2a323d;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index bbd49b491..8431e0af8 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -920,6 +920,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: rgba(255, 255, 255, 0.6);
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.25rem 0.75rem;
+  margin-right: 0.5rem;
+  background: #c298d8;
+  color: #151515;
+  border-radius: 4px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: rgba(255, 255, 255, 0.6);
@@ -931,6 +941,10 @@
   border-color: #f19ea6;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.25rem 0.75rem;
+}
+
 .p-multiselect-panel {
   background: #2a323d;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index b528f7466..04f059ee6 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -920,6 +920,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: #6c757d;
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.25rem 0.75rem;
+  margin-right: 0.5rem;
+  background: #007bff;
+  color: #ffffff;
+  border-radius: 4px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: #495057;
@@ -931,6 +941,10 @@
   border-color: #dc3545;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.25rem 0.75rem;
+}
+
 .p-multiselect-panel {
   background: #ffffff;
   color: #212529;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index bb542dc0b..07e57835f 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -920,6 +920,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: #6c757d;
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.25rem 0.75rem;
+  margin-right: 0.5rem;
+  background: #883cae;
+  color: #ffffff;
+  border-radius: 4px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: #495057;
@@ -931,6 +941,10 @@
   border-color: #dc3545;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.25rem 0.75rem;
+}
+
 .p-multiselect-panel {
   background: #ffffff;
   color: #212529;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 7f2057ff3..3ef111786 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -916,6 +916,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: #605e5c;
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: #edebe9;
+  color: #323130;
+  border-radius: 2px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: #605e5c;
@@ -927,6 +937,10 @@
   border-color: #a4252c;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
 .p-multiselect-panel {
   background: #ffffff;
   color: #323130;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index e2801b2d6..49820734b 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -920,6 +920,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: #9b9b9b;
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.2145rem 0.429rem;
+  margin-right: 0.5rem;
+  background: #FFE082;
+  color: #212529;
+  border-radius: 3px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: #888888;
@@ -931,6 +941,10 @@
   border-color: #e57373;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.2145rem 0.429rem;
+}
+
 .p-multiselect-panel {
   background: #323232;
   color: #dedede;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 06ebdddf8..0ad81710e 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -920,6 +920,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: #9b9b9b;
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.2145rem 0.429rem;
+  margin-right: 0.5rem;
+  background: #81D4FA;
+  color: #212529;
+  border-radius: 3px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: #888888;
@@ -931,6 +941,10 @@
   border-color: #e57373;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.2145rem 0.429rem;
+}
+
 .p-multiselect-panel {
   background: #323232;
   color: #dedede;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 3c6716f4b..24f49203d 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -920,6 +920,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: #9b9b9b;
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.2145rem 0.429rem;
+  margin-right: 0.5rem;
+  background: #C5E1A5;
+  color: #212529;
+  border-radius: 3px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: #888888;
@@ -931,6 +941,10 @@
   border-color: #e57373;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.2145rem 0.429rem;
+}
+
 .p-multiselect-panel {
   background: #323232;
   color: #dedede;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 7794eaf6d..b070c5121 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -920,6 +920,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: #9b9b9b;
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.2145rem 0.429rem;
+  margin-right: 0.5rem;
+  background: #F48FB1;
+  color: #212529;
+  border-radius: 3px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: #888888;
@@ -931,6 +941,10 @@
   border-color: #e57373;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.2145rem 0.429rem;
+}
+
 .p-multiselect-panel {
   background: #323232;
   color: #dedede;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index f99388c95..40c53025d 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -940,6 +940,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: rgba(255, 255, 255, 0.6);
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.5rem 1rem;
+  margin-right: 0.5rem;
+  background: rgba(206, 147, 216, 0.16);
+  color: #CE93D8;
+  border-radius: 4px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: rgba(255, 255, 255, 0.6);
@@ -951,6 +961,10 @@
   border-color: #f44435;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.5rem 1rem;
+}
+
 .p-multiselect-panel {
   background: #2b2b2b;
   color: rgba(255, 255, 255, 0.87);
@@ -5032,6 +5046,30 @@
   background: transparent;
 }
 
+.p-float-label .p-multiselect-label .p-multiselect-token {
+  padding: 0.25rem 1rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.p-input-filled .p-float-label .p-multiselect .p-multiselect-label {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  font-size: 75%;
+}
+
 .p-overlaypanel .p-overlaypanel-content {
   padding: 1.5rem;
 }
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 3c465cc22..788a72f64 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -940,6 +940,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: rgba(255, 255, 255, 0.6);
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.5rem 1rem;
+  margin-right: 0.5rem;
+  background: rgba(159, 168, 218, 0.16);
+  color: #9FA8DA;
+  border-radius: 4px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: rgba(255, 255, 255, 0.6);
@@ -951,6 +961,10 @@
   border-color: #f44435;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.5rem 1rem;
+}
+
 .p-multiselect-panel {
   background: #2b2b2b;
   color: rgba(255, 255, 255, 0.87);
@@ -5032,6 +5046,30 @@
   background: transparent;
 }
 
+.p-float-label .p-multiselect-label .p-multiselect-token {
+  padding: 0.25rem 1rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.p-input-filled .p-float-label .p-multiselect .p-multiselect-label {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  font-size: 75%;
+}
+
 .p-overlaypanel .p-overlaypanel-content {
   padding: 1.5rem;
 }
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index db75d5630..aace49812 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -940,6 +940,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: rgba(0, 0, 0, 0.6);
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.5rem 1rem;
+  margin-right: 0.5rem;
+  background: rgba(103, 58, 183, 0.12);
+  color: #673AB7;
+  border-radius: 4px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: rgba(0, 0, 0, 0.6);
@@ -951,6 +961,10 @@
   border-color: #B00020;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.5rem 1rem;
+}
+
 .p-multiselect-panel {
   background: #ffffff;
   color: #000001;
@@ -5032,6 +5046,30 @@
   background: transparent;
 }
 
+.p-float-label .p-multiselect-label .p-multiselect-token {
+  padding: 0.25rem 1rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.p-input-filled .p-float-label .p-multiselect .p-multiselect-label {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  font-size: 75%;
+}
+
 .p-overlaypanel .p-overlaypanel-content {
   padding: 1.5rem;
 }
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 729483369..1baadb8f7 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -940,6 +940,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: rgba(0, 0, 0, 0.6);
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.5rem 1rem;
+  margin-right: 0.5rem;
+  background: rgba(63, 81, 181, 0.12);
+  color: #3F51B5;
+  border-radius: 4px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: rgba(0, 0, 0, 0.6);
@@ -951,6 +961,10 @@
   border-color: #B00020;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.5rem 1rem;
+}
+
 .p-multiselect-panel {
   background: #ffffff;
   color: #000001;
@@ -5032,6 +5046,30 @@
   background: transparent;
 }
 
+.p-float-label .p-multiselect-label .p-multiselect-token {
+  padding: 0.25rem 1rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.p-input-filled .p-float-label .p-multiselect .p-multiselect-label {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  font-size: 75%;
+}
+
 .p-overlaypanel .p-overlaypanel-content {
   padding: 1.5rem;
 }
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 004ce8d64..b5524e051 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -940,6 +940,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: rgba(255, 255, 255, 0.6);
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.375rem 0.75rem;
+  margin-right: 0.5rem;
+  background: rgba(103, 58, 183, 0.16);
+  color: #673AB7;
+  border-radius: 4px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: rgba(255, 255, 255, 0.6);
@@ -951,6 +961,10 @@
   border-color: #f44435;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.375rem 0.75rem;
+}
+
 .p-multiselect-panel {
   background: #2b2b2b;
   color: rgba(255, 255, 255, 0.87);
@@ -5032,6 +5046,30 @@
   background: transparent;
 }
 
+.p-float-label .p-multiselect-label .p-multiselect-token {
+  padding: 0.25rem 1rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.p-input-filled .p-float-label .p-multiselect .p-multiselect-label {
+  padding-top: 1.25rem;
+  padding-bottom: 0.25rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label {
+  padding-top: 1.25rem;
+  padding-bottom: 0.25rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  font-size: 75%;
+}
+
 .p-overlaypanel .p-overlaypanel-content {
   padding: 1.5rem;
 }
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 43510c2aa..dba7f1f13 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -940,6 +940,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: rgba(255, 255, 255, 0.6);
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.375rem 0.75rem;
+  margin-right: 0.5rem;
+  background: rgba(63, 81, 181, 0.16);
+  color: #3F51B5;
+  border-radius: 4px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: rgba(255, 255, 255, 0.6);
@@ -951,6 +961,10 @@
   border-color: #f44435;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.375rem 0.75rem;
+}
+
 .p-multiselect-panel {
   background: #2b2b2b;
   color: rgba(255, 255, 255, 0.87);
@@ -5032,6 +5046,30 @@
   background: transparent;
 }
 
+.p-float-label .p-multiselect-label .p-multiselect-token {
+  padding: 0.25rem 1rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.p-input-filled .p-float-label .p-multiselect .p-multiselect-label {
+  padding-top: 1.25rem;
+  padding-bottom: 0.25rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label {
+  padding-top: 1.25rem;
+  padding-bottom: 0.25rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  font-size: 75%;
+}
+
 .p-overlaypanel .p-overlaypanel-content {
   padding: 1.5rem;
 }
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 0ae10dcf2..903fcbd0f 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -940,6 +940,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: rgba(0, 0, 0, 0.6);
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.375rem 0.75rem;
+  margin-right: 0.5rem;
+  background: rgba(103, 58, 183, 0.12);
+  color: #673AB7;
+  border-radius: 4px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: rgba(0, 0, 0, 0.6);
@@ -951,6 +961,10 @@
   border-color: #B00020;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.375rem 0.75rem;
+}
+
 .p-multiselect-panel {
   background: #ffffff;
   color: #000001;
@@ -5032,6 +5046,30 @@
   background: transparent;
 }
 
+.p-float-label .p-multiselect-label .p-multiselect-token {
+  padding: 0.25rem 1rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.p-input-filled .p-float-label .p-multiselect .p-multiselect-label {
+  padding-top: 1.25rem;
+  padding-bottom: 0.25rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label {
+  padding-top: 1.25rem;
+  padding-bottom: 0.25rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  font-size: 75%;
+}
+
 .p-overlaypanel .p-overlaypanel-content {
   padding: 1.5rem;
 }
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index f4f43e326..82bfbc793 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -940,6 +940,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: rgba(0, 0, 0, 0.6);
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.375rem 0.75rem;
+  margin-right: 0.5rem;
+  background: rgba(63, 81, 181, 0.12);
+  color: #3F51B5;
+  border-radius: 4px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: rgba(0, 0, 0, 0.6);
@@ -951,6 +961,10 @@
   border-color: #B00020;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.375rem 0.75rem;
+}
+
 .p-multiselect-panel {
   background: #ffffff;
   color: #000001;
@@ -5032,6 +5046,30 @@
   background: transparent;
 }
 
+.p-float-label .p-multiselect-label .p-multiselect-token {
+  padding: 0.25rem 1rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.p-input-filled .p-float-label .p-multiselect .p-multiselect-label {
+  padding-top: 1.25rem;
+  padding-bottom: 0.25rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label {
+  padding-top: 1.25rem;
+  padding-bottom: 0.25rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  font-size: 75%;
+}
+
 .p-overlaypanel .p-overlaypanel-content {
   padding: 1.5rem;
 }
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 49902671e..fe4473f22 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -916,6 +916,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: #666666;
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.2145rem 0.429rem;
+  margin-right: 0.5rem;
+  background: #e02365;
+  color: #ffffff;
+  border-radius: 3px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: #848484;
@@ -927,6 +937,10 @@
   border-color: #a80000;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.2145rem 0.429rem;
+}
+
 .p-multiselect-panel {
   background: #ffffff;
   color: #333333;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index fd3c481a0..dfd726081 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -920,6 +920,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: #666666;
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.2145rem 0.429rem;
+  margin-right: 0.5rem;
+  background: #007ad9;
+  color: #ffffff;
+  border-radius: 3px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: #848484;
@@ -931,6 +941,10 @@
   border-color: #a80000;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.2145rem 0.429rem;
+}
+
 .p-multiselect-panel {
   background: #ffffff;
   color: #333333;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 5bad15699..59629f977 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -920,6 +920,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: #666666;
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.2145rem 0.429rem;
+  margin-right: 0.5rem;
+  background: #41b883;
+  color: #ffffff;
+  border-radius: 3px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: #848484;
@@ -931,6 +941,10 @@
   border-color: #a80000;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.2145rem 0.429rem;
+}
+
 .p-multiselect-panel {
   background: #ffffff;
   color: #333333;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index f76b4f13f..ce82f8a39 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -920,6 +920,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: #666666;
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.2145rem 0.429rem;
+  margin-right: 0.5rem;
+  background: #007ad9;
+  color: #ffffff;
+  border-radius: 3px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: #848484;
@@ -931,6 +941,10 @@
   border-color: #a80000;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.2145rem 0.429rem;
+}
+
 .p-multiselect-panel {
   background: #ffffff;
   color: #333333;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index aadfb786c..1ab2749b1 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -916,6 +916,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: #a6a6a6;
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.2145rem 0.429rem;
+  margin-right: 0.5rem;
+  background: #AFD3C8;
+  color: #385048;
+  border-radius: 2px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: #a6a6a6;
@@ -927,6 +937,10 @@
   border-color: #e7a3a3;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.2145rem 0.429rem;
+}
+
 .p-multiselect-panel {
   background: #ffffff;
   color: #666666;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 5e6da29f6..9252f12e4 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -916,6 +916,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: #6c757d;
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: #E3F2FD;
+  color: #495057;
+  border-radius: 3px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: #6c757d;
@@ -927,6 +937,10 @@
   border-color: #f44336;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
 .p-multiselect-panel {
   background: #ffffff;
   color: #495057;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 8147df6a7..8ea803bba 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -916,6 +916,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: #6c757d;
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: #E8F5E9;
+  color: #495057;
+  border-radius: 3px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: #6c757d;
@@ -927,6 +937,10 @@
   border-color: #f44336;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
 .p-multiselect-panel {
   background: #ffffff;
   color: #495057;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 7bc7cc140..a3d01d201 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -916,6 +916,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: #6c757d;
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: #FFF3E0;
+  color: #495057;
+  border-radius: 3px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: #6c757d;
@@ -927,6 +937,10 @@
   border-color: #f44336;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
 .p-multiselect-panel {
   background: #ffffff;
   color: #495057;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 073013ad1..2db01076d 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -916,6 +916,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: #6c757d;
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: #F3E5F5;
+  color: #495057;
+  border-radius: 3px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: #6c757d;
@@ -927,6 +937,10 @@
   border-color: #f44336;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
 .p-multiselect-panel {
   background: #ffffff;
   color: #495057;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 5c0b0791a..4ed92eaa4 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -916,6 +916,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: rgba(255, 255, 255, 0.6);
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: rgba(100, 181, 246, 0.16);
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 3px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: rgba(255, 255, 255, 0.6);
@@ -927,6 +937,10 @@
   border-color: #ef9a9a;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
 .p-multiselect-panel {
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 093c5b654..73090886f 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -916,6 +916,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: rgba(255, 255, 255, 0.6);
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: rgba(129, 199, 132, 0.16);
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 3px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: rgba(255, 255, 255, 0.6);
@@ -927,6 +937,10 @@
   border-color: #ef9a9a;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
 .p-multiselect-panel {
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index d3510edaa..cfe0fadba 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -916,6 +916,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: rgba(255, 255, 255, 0.6);
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: rgba(255, 213, 79, 0.16);
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 3px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: rgba(255, 255, 255, 0.6);
@@ -927,6 +937,10 @@
   border-color: #ef9a9a;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
 .p-multiselect-panel {
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 61428364d..1f3d3957a 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -916,6 +916,16 @@
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: rgba(255, 255, 255, 0.6);
 }
+.p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: rgba(186, 104, 200, 0.16);
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 3px;
+}
+.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: rgba(255, 255, 255, 0.6);
@@ -927,6 +937,10 @@
   border-color: #ef9a9a;
 }
 
+.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
 .p-multiselect-panel {
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
index da7e5c902..5862d6e3e 100755
--- a/src/components/multiselect/MultiSelect.vue
+++ b/src/components/multiselect/MultiSelect.vue
@@ -7,7 +7,16 @@
         <div class="p-multiselect-label-container">
             <div :class="labelClass">
                 <slot name="value" :value="modelValue" :placeholder="placeholder">
-                    {{label}}
+                    <template v-if="display === 'comma'">
+                        {{label || 'empty'}}
+                    </template>
+                    <template v-else-if="display === 'chip'">
+                        <div v-for="item of modelValue" class="p-multiselect-token" :key="getLabelByValue(item)">
+                            <span class="p-multiselect-token-label">{{getLabelByValue(item)}}</span>
+                            <span v-if="!disabled" class="p-multiselect-token-icon pi pi-times-circle" @click="removeChip(item)"></span>
+                        </div>
+                        <template v-if="!modelValue || modelValue.length === 0">{{placeholder || 'empty'}}</template>
+                    </template>
                 </slot>
             </div>
         </div>
@@ -88,6 +97,10 @@ export default {
         emptyFilterMessage: {
             type: String,
             default: 'No results found'
+        },
+        display: {
+            type: String,
+            default: 'comma'
         }
     },
     data() {
@@ -400,6 +413,12 @@ export default {
         },
         overlayRef(el) {
             this.overlay = el;
+        },
+        removeChip(item) {
+            let value = this.modelValue.filter(val => !ObjectUtils.equals(val, item, this.equalityKey));
+
+            this.$emit('update:modelValue', value);
+            this.$emit('change', {originalEvent: event, value: value});
         }
     },
     computed: {
@@ -413,6 +432,7 @@ export default {
             return [
                 'p-multiselect p-component p-inputwrapper',
                 {
+                    'p-multiselect-chip': this.display === 'chip',
                     'p-disabled': this.disabled,
                     'p-focus': this.focused,
                     'p-inputwrapper-filled': this.modelValue && this.modelValue.length,
@@ -425,7 +445,7 @@ export default {
                 'p-multiselect-label',
                 {
                     'p-placeholder': this.label === this.placeholder,
-                    'p-multiselect-label-empty': !this.$slots['value'] && !this.placeholder && (!this.modelValue || this.modelValue.length === 0)
+                    'p-multiselect-label-empty': !this.placeholder && (!this.modelValue || this.modelValue.length === 0)
                 }
             ];
         },
@@ -443,7 +463,7 @@ export default {
                 }
             }
             else {
-                label = this.placeholder || 'p-multiselect';
+                label = this.placeholder;
             }
 
             return label;
@@ -511,6 +531,17 @@ export default {
     visibility: hidden;
 }
 
+.p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+}
+
+.p-multiselect-token-icon {
+    cursor: pointer;
+}
+
 .p-multiselect .p-multiselect-panel {
     min-width: 100%;
 }
diff --git a/src/views/multiselect/MultiSelectDemo.vue b/src/views/multiselect/MultiSelectDemo.vue
index 8919e7e93..2791a5140 100755
--- a/src/views/multiselect/MultiSelectDemo.vue
+++ b/src/views/multiselect/MultiSelectDemo.vue
@@ -11,7 +11,10 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Basic</h5>
-                <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select a City" />
+                <MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" placeholder="Select a City" />
+
+                <h5>Chips</h5>
+                <MultiSelect v-model="selectedCities2" :options="cities" optionLabel="name" placeholder="Select a City" display="chip" />
 
                 <h5>Advanced with Templating and Filtering</h5>
                 <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
@@ -44,7 +47,8 @@ import MultiSelectDoc from './MultiSelectDoc';
 export default {
     data() {
         return {
-            selectedCities: null,
+            selectedCities1: null,
+            selectedCities2: null,
             selectedCountries: null,
             cities: [
                 {name: 'New York', code: 'NY'},
diff --git a/src/views/multiselect/MultiSelectDoc.vue b/src/views/multiselect/MultiSelectDoc.vue
index f01ba9625..0b2376bdd 100755
--- a/src/views/multiselect/MultiSelectDoc.vue
+++ b/src/views/multiselect/MultiSelectDoc.vue
@@ -36,6 +36,14 @@ data() {
 	}
 }
 
+</code></pre>
+
+                <h5>Chips Display</h5>
+                <p>A comma separated list is used by default to display selected items whereas alternative chip mode is provided using the <i>display</i> property to visualize the items as tokens.</p>
+<pre v-code>
+<code>
+&lt;MultiSelect v-model="selectedCars" :options="cars" optionLabel="brand" placeholder="Select Brands" display="chip"/&gt;
+
 </code></pre>
 
 				<h5>Custom Content</h5>
@@ -320,7 +328,10 @@ data() {
 <pre v-code>
 <code><template v-pre>
 &lt;h5&gt;Basic&lt;/h5&gt;
-&lt;MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select a City" /&gt;
+&lt;MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" placeholder="Select a City" /&gt;
+
+&lt;h5&gt;Chips&lt;/h5&gt;
+&lt;MultiSelect v-model="selectedCities2" :options="cities" optionLabel="name" placeholder="Select a City" display="chip"/&gt;
 
 &lt;h5&gt;Advanced with Templating and Filtering&lt;/h5&gt;
 &lt;MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom"&gt;
@@ -348,7 +359,8 @@ data() {
 export default {
     data() {
         return {
-            selectedCities: null,
+            selectedCities1: null,
+            selectedCities2: null,
             selectedCountries: null,
             cities: [
                 {name: 'New York', code: 'NY'},