Regione Toscana Design System

Widget Chip Filters 

<ul class="rtds-flex rtds-flex-wrap rtds-gap-2" aria-label="Filtri attivi">
    <li><span class="rtds-chip has-button-close rtds-chip--filter">
            ALESSANDRA NARDINI
            <button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
                <svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#mini--x-mark" />
                </svg>

                <span class="rtds-sr-only">Rimuovi ALESSANDRA NARDINI</span>
            </button>
        </span></li>
    <li>
        <span class="rtds-chip has-button-close rtds-chip--filter">
            Data atto inizio: 23/05/2024
            <button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
                <svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#mini--x-mark" />
                </svg>

                <span class="rtds-sr-only">Rimuovi Data atto inizio: 23/05/2024</span>
            </button>
        </span>
    </li>
    <li><span class="rtds-chip has-button-close rtds-chip--filter">
            Oggetto: Atto
            <button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
                <svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#mini--x-mark" />
                </svg>

                <span class="rtds-sr-only">Rimuovi Oggetto: Atto</span>
            </button>
        </span></li>
    <li>
        <span class="rtds-chip has-button-close rtds-chip--filter">
            Tipologia atto: Lorem ipsum dolor sit
            amet
            <button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
                <svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#mini--x-mark" />
                </svg>

                <span class="rtds-sr-only">Rimuovi Tipologia atto: Lorem ipsum dolor sit
                    amet</span>
            </button>
        </span>
    </li>
    <li>
        <span class="rtds-chip has-button-close rtds-chip--filter">
            Numero atto - da numero: 12
            <button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
                <svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#mini--x-mark" />
                </svg>

                <span class="rtds-sr-only">Rimuovi Numero atto - da numero: 12</span>
            </button>
        </span>
    </li>
</ul>
 
<ul class="rtds-flex rtds-flex-wrap rtds-gap-2" aria-label="Filtri attivi">
  <li>{% render '@chip--filter',{label: 'ALESSANDRA NARDINI' }, true %}</li>
  <li>
    {% render '@chip--filter',{ label: 'Data atto inizio: 23/05/2024' }, true %}
  </li>
  <li>{% render '@chip--filter',{ label: 'Oggetto: Atto' }, true %}</li>
  <li>
    {% render '@chip--filter',{ label: 'Tipologia atto: Lorem ipsum dolor sit
    amet' }, true %}
  </li>
  <li>
    {% render '@chip--filter',{ label: 'Numero atto - da numero: 12' }, true %}
  </li>
</ul>
 
/* No context defined. */

No notes defined.