title: How to implement Multi - Select in Material Components for the web
body: <p>I am trying to implement material design <strong>Select Component</strong> with multiple selections from <strong><a href="https://github.com/material-components/material-components-web" rel="nofollow noreferrer">Material Components for the web</a></strong>. But I am unable to find any option for the same.</p>
  <p>Code for Select. [ <a href="https://github.com/material-components/material-components-web/tree/master/packages/mdc-select" rel="nofollow noreferrer">Documentation</a> ]</p>
  <pre><code>&lt;div class=&quot;mdc-xyz-inputs-drop-down mdc-select mdc-select--outlined mdc-select--required &quot; style=&quot;width:100%&quot;&gt;   
            &lt;input type=&quot;hidden&quot; name=&quot;xyz-input&quot;&gt;
            &lt;div class=&quot;mdc-select__anchor&quot;
                 role=&quot;button&quot;
                 aria-haspopup=&quot;listbox&quot;
                 aria-expanded=&quot;false&quot;
                 aria-labelledby=&quot;xyz-label xyz-selected-text&quot;&gt;
                 
              &lt;span class=&quot;mdc-notched-outline&quot;&gt;
              &lt;span class=&quot;mdc-notched-outline__leading&quot;&gt;&lt;/span&gt;
              &lt;span class=&quot;mdc-notched-outline__notch&quot;&gt;   
                 
              
                &lt;span id=&quot;xyz-label&quot; class=&quot;mdc-floating-label&quot;&gt;LABEL&lt;/span&gt;
                &lt;/span&gt;
                &lt;span class=&quot;mdc-notched-outline__trailing&quot;&gt;&lt;/span&gt;
              &lt;/span&gt;
              
              &lt;span id=&quot;xyz-selected-text&quot; class=&quot;mdc-select__selected-text&quot;&gt;&lt;/span&gt;
              &lt;span class=&quot;mdc-select__dropdown-icon&quot;&gt;
                &lt;svg
                    class=&quot;mdc-select__dropdown-icon-graphic&quot;
                    viewBox=&quot;7 10 10 5&quot; focusable=&quot;false&quot;&gt;
                  &lt;polygon
                      class=&quot;mdc-select__dropdown-icon-inactive&quot;
                      stroke=&quot;none&quot;
                      fill-rule=&quot;evenodd&quot;
                      points=&quot;7 10 12 15 17 10&quot;&gt;
                  &lt;/polygon&gt;
                  &lt;polygon
                      class=&quot;mdc-select__dropdown-icon-active&quot;
                      stroke=&quot;none&quot;
                      fill-rule=&quot;evenodd&quot;
                      points=&quot;7 15 12 10 17 15&quot;&gt;
                  &lt;/polygon&gt;
                &lt;/svg&gt;
              &lt;/span&gt;
              &lt;span class=&quot;mdc-line-ripple&quot;&gt;&lt;/span&gt;
            &lt;/div&gt;
             &lt;div class=&quot;mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth&quot;&gt;
                  &lt;ul class=&quot;mdc-list&quot; role=&quot;listbox&quot; aria-label=&quot;LABEL&quot;&gt;
                       
                                 &lt;!-- Options Start --&gt; 
  
                       &lt;li class=&quot;mdc-list-item&quot; aria-selected=&quot;false&quot; data- 
                           value=&quot;1&quot; role=&quot;option&quot;&gt;
                             &lt;span class=&quot;mdc-list-item__ripple&quot;&gt;&lt;/span&gt;
                             &lt;span class=&quot;mdc-list-item__text&quot;&gt;
                                one
                             &lt;/span&gt;
                      &lt;/li&gt;
                      &lt;li class=&quot;mdc-list-item&quot; aria-selected=&quot;false&quot; data- 
                           value=&quot;2&quot; role=&quot;option&quot;&gt;
                             &lt;span class=&quot;mdc-list-item__ripple&quot;&gt;&lt;/span&gt;
                             &lt;span class=&quot;mdc-list-item__text&quot;&gt;
                                two
                             &lt;/span&gt;
                      &lt;/li&gt;
                                 &lt;!-- Options End --&gt; 
                  &lt;/ul&gt;   
              &lt;/div&gt;  
            &lt;/div&gt;
          
  
  </code></pre>
  <p>How can we change it to support multiple selections in list or dropdown or same component which allows multi-select?</p>