Search Box

Pannello di ricerca con campo di input, pulsante di ricerca e chip filtro rapido.

Comportamento

<div> con titolo e descrizione, campo di input @input-field--search affiancato al pulsante “Cerca” (@button--size-s), e lista di chip filtro (@chip--filter). Tipicamente posizionato in una sidebar o area di filtraggio.

Il titolo ("Ricerca") e la descrizione ("Trova servizi: Inserisci i tuoi parametri di ricerca") sono valori hardcoded nel template con il filtro default() — non sono parametri configurabili dal contesto Fractal.

Dipendenze

• @input-field--search — campo di ricerca con label nascosta
• @button--size-s — pulsante “Cerca” di dimensione ridotta
• @chip--filter — chip per filtri rapidi

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria. Non descrive attributi HTML da usare nei temi o ambienti di implementazione.

• inputLabel (stringa, opzionale): Label del campo di ricerca (visibile solo a screen reader). Default: "Cerca"

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

• 3.3.2 Etichette o istruzioni — il campo input ha hiddenLabel: true con label accessibile tramite inputLabel
• 1.3.1 Informazioni e correlazioni — il titolo <h2> identifica il pannello di ricerca per gli screen reader
• 2.1.1 Tastiera — il campo di input e il pulsante “Cerca” sono raggiungibili e attivabili da tastiera; i chip filtro sono interattivi

Struttura e semantica

• Il componente è renderizzato come <div> — wrapper non semantico; avvolgere in <form> nell’implementazione reale
• Il titolo <h2> identifica il pannello di ricerca
• Il campo input ha label nascosta visivamente tramite hiddenLabel: true — disponibile agli screen reader

Esempi di utilizzo

<form action="/ricerca" method="get">
  <!-- @search-box -->
</form>

<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 servizi
        
    </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>