Dealing with too many pills

[OreFoX18]

I've been wondering if there is a neat way to deal with the case when too many pills are displayed. Is it possible to, for example, condense or hide the pills if there are too many of them and expand them again on demand?

I would appreciate if you have any ideas or suggestions regarding this.

Kind regards
Haris

[mujadadrao]

Hey @OreFoX18 , I used CSS to hide the selected pills and it works like a charm. You can add a button to show and hide pills by adding and removing this CSS on the .tag-item. Here's how I did it:

        .tag-list,
        .tag-item {
          width: 100%;

          // this hides all the selected pills except for the placeholder text 
          &:not(:last-child) {
            display: none;
          }

          input {
            font-family: var(--font-normal);
            color: $navy-1;
            font-size: 18px;
            font-style: normal;
            font-weight: normal;
            line-height: normal;
            border: none;
            width: 100%;
            background: transparent;
          }
        }

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 10 days if no further activity occurs. Thank you for your contributions.