Regione Toscana Design System

Search Box 

<div class="rtds-grid rtds-gap-4 md:rtds-gap-6">
    <div class="rtds-grid rtds-gap-2">
        <h2 class="rtds-heading-2">
            Ricerca
        </h2>

        <p class="rtds-text-sm md:rtds-text-base">
            Trova servizi: Inserisci i tuoi parametri di ricerca
        </p>
    </div>

    <div class="rtds-grid rtds-gap-3 md:rtds-gap-4">
        <div class="rtds-flex rtds-gap-1">
            <div class="rtds-input-field rtds-gap-1 rtds-flex-1 ">
                <label for="search-input" class="rtds-input-field__label rtds-sr-only">
                    Cerca

                </label>

                <div class="rtds-input has-icon">

                    <svg class="rtds-icon rtds-fill-current rtds-input__icon" aria-hidden="true" focusable="false" role="img">
                        <use href="../../icons.svg#mini--magnifying-glass" />
                    </svg>

                    <input id="search-input" class="rtds-text-sm rtds-input-placeholder" type="search">
                </div>

            </div>
            <button type="submit" class="rtds-btn 
    rtds-btn--primary
     rtds-btn--secondary rtds-btn--s">

                Cerca

            </button>

        </div>

        <div>
            <ul class="rtds-flex rtds-gap-1 rtds-flex-wrap">

                <li>
                    <span class="rtds-chip has-button-close rtds-chip--filter">
                        Filtro 1
                        <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 Filtro 1</span>
                        </button>
                    </span>
                </li>

                <li>
                    <span class="rtds-chip has-button-close rtds-chip--filter">
                        Filtro 2
                        <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 Filtro 2</span>
                        </button>
                    </span>
                </li>

                <li>
                    <span class="rtds-chip has-button-close rtds-chip--filter">
                        Filtro 3
                        <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 Filtro 3</span>
                        </button>
                    </span>
                </li>

                <li>
                    <span class="rtds-chip has-button-close rtds-chip--filter">
                        Filtro 4
                        <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 Filtro 4</span>
                        </button>
                    </span>
                </li>

            </ul>
        </div>
    </div>
</div>
 
<div class="rtds-grid rtds-gap-4 md:rtds-gap-6">
   <div class="rtds-grid rtds-gap-2">
      <h2 class="rtds-heading-2">
         {{ heading|default('Ricerca') }}
      </h2>

      <p class="rtds-text-sm md:rtds-text-base">
         {{ description|default('Trova servizi: Inserisci i tuoi parametri di ricerca') }}
      </p>
   </div>

   <div class="rtds-grid rtds-gap-3 md:rtds-gap-4">
      <div class="rtds-flex rtds-gap-1">
      {% render '@input-field--search', { hiddenLabel: 'true', label: inputLabel, inputId: 'search-input', inputName: 'search-input', classes: 'rtds-flex-1'}, true %}
      {% render '@button--size-s', { label: 'Cerca', buttonType: 'submit', classes: 'rtds-btn--secondary'}, true %}
      </div>

      <div>
         <ul class="rtds-flex rtds-gap-1 rtds-flex-wrap">
            {% for i in range(1, 5) %}
            <li>
               {% render '@chip--filter', { label: 'Filtro ' + i }, true %}
            </li>
            {% endfor %}
         </ul>
      </div>
    </div>
</div>
 
{
  "inputLabel": "Cerca"
}

No notes defined.