Regione Toscana Design System

Widget Search 

<div class="rtds-accordion rtds-p-0 rtds-accordion--widget">
    <h2 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-p-2 rtds-text-base rtds-background-03">
        <button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-flex-1 rtds-transition-all" aria-controls="accordionSearch-1" id="accordionSearch1id">
            <span class="rtds-accordion__trigger-label">
                Ricerca avanzata
            </span>

            <span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
                <svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
                    <use href="/icons.svg#mini--chevron-up" />
                </svg>

            </span>

        </button>
    </h2>
    <div id="accordionSearch-1" role="region" aria-labelledby="accordionSearch1id" class="rtds-accordion__pane rtds-transition-all rtds-px-2">

        <form name="search-form">

            <div class="rtds-grid rtds-gap-6">

                <!-- ROW 1 -->
                <div class="rtds-field-row">

                    <!-- FIELDSET DATA -->
                    <fieldset class="rtds-input-field rtds-input-fieldset">
                        <legend class="rtds-input-field__label">
                            Data atto
                        </legend>
                        <div class="rtds-grid sm:rtds-flex rtds-gap-4 sm:rtds-gap-6 sm:rtds-items-start">
                            <div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
                                <label for="attoStart" class="rtds-input-field__label rtds-sr-only">
                                    Data inizio atto

                                </label>

                                <div class="rtds-input">
                                    <input id="attoStart" class="rtds-text-sm rtds-input-placeholder" type="date" aria-describedBy="inputDataInizioAtto">
                                </div>

                                <span class="rtds-input-field__hint">

                                    <span class="rtds-input-field__description" id="inputDataInizioAtto">
                                        Anno inizio ricerca - formato gg/mm/aaaa
                                    </span>

                                </span>

                            </div>
                            <div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
                                <label for="attoEnd" class="rtds-input-field__label rtds-sr-only">
                                    Data fine atto

                                </label>

                                <div class="rtds-input">
                                    <input id="attoEnd" class="rtds-text-sm rtds-input-placeholder" type="date" aria-describedBy="inputDataFineAtto">
                                </div>

                                <span class="rtds-input-field__hint">

                                    <span class="rtds-input-field__description" id="inputDataFineAtto">
                                        Anno fine ricerca - formato gg/mm/aaaa
                                    </span>

                                </span>

                            </div>
                        </div>
                    </fieldset>
                    <!-- FIELDSET NUMERO ATTO -->
                    <fieldset class="rtds-input-field rtds-input-fieldset">
                        <legend class="rtds-input-field__label">
                            Numero atto
                        </legend>
                        <div class="rtds-grid sm:rtds-flex rtds-gap-4 sm:rtds-gap-6 sm:rtds-items-start">
                            <div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
                                <label for="attoNumberStart" class="rtds-input-field__label rtds-sr-only">
                                    Numero atto - inizio

                                </label>

                                <div class="rtds-input">
                                    <input id="attoNumberStart" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputNumeroAttoInizio">
                                </div>

                                <span class="rtds-input-field__hint">

                                    <span class="rtds-input-field__description" id="inputNumeroAttoInizio">
                                        Da numero
                                    </span>

                                </span>

                            </div>
                            <div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
                                <label for="attoNumberEnd" class="rtds-input-field__label rtds-sr-only">
                                    Numero atto - fine

                                </label>

                                <div class="rtds-input">
                                    <input id="attoNumberEnd" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputNumeroAttoFine">
                                </div>

                                <span class="rtds-input-field__hint">

                                    <span class="rtds-input-field__description" id="inputNumeroAttoFine">
                                        A numero
                                    </span>

                                </span>

                            </div>
                        </div>
                    </fieldset>
                </div>

                <!-- ROW 2 -->
                <div class="rtds-field-row">
                    <div class="rtds-input-field rtds-gap-1 ">
                        <label for="oggetto" class="rtds-input-field__label">
                            Oggetto

                        </label>

                        <div class="rtds-input">
                            <input id="oggetto" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputOggetto">
                        </div>

                        <span class="rtds-input-field__hint">

                            <span class="rtds-input-field__description" id="inputOggetto">
                                Ricerca esatta del testo inserito
                            </span>

                        </span>

                    </div>
                    <div class="rtds-input-field rtds-select-field">
                        <label for="selectId" class="rtds-input-field__label">
                            Assessore

                        </label>

                        <div class="rtds-select">

                            <select id="selectId" class="" aria-describedBy="selectAssessore">
                                <option value="1">Text</option>
                                <option value="2">Option 1</option>
                                <option value="3">Option 2</option>
                                <option value="4">Option 3</option>
                                <option value="5">Option 4</option>
                                <option value="6">Option 5</option>

                            </select>
                        </div>

                        <span class="rtds-input-field__hint">

                            <span class="rtds-input-field__description" id="selectAssessore">
                                Seleziona nome dell&#39;assessore
                            </span>

                        </span>

                    </div>
                    <div class="rtds-input-field rtds-select-field">
                        <label for="selectId" class="rtds-input-field__label">
                            Tipologia Atto

                        </label>

                        <div class="rtds-select">

                            <select id="selectId" class="" aria-describedBy="selectAtto">
                                <option value="1">Text</option>
                                <option value="2">Option 1</option>
                                <option value="3">Option 2</option>
                                <option value="4">Option 3</option>
                                <option value="5">Option 4</option>
                                <option value="6">Option 5</option>

                            </select>
                        </div>

                        <span class="rtds-input-field__hint">

                            <span class="rtds-input-field__description" id="selectAtto">
                                Ricerca tipologia atto
                            </span>

                        </span>

                    </div>
                </div>

                <!-- ROW 3 -->
                <div class="rtds-field-row">
                    <div class="rtds-input-field rtds-select-field">
                        <label for="selectId" class="rtds-input-field__label">
                            Struttura di vertice

                        </label>

                        <div class="rtds-select">

                            <select id="selectId" class="" aria-describedBy="selectStrutturaVertice">
                                <option value="1">Text</option>
                                <option value="2">Option 1</option>
                                <option value="3">Option 2</option>
                                <option value="4">Option 3</option>
                                <option value="5">Option 4</option>
                                <option value="6">Option 5</option>

                            </select>
                        </div>

                        <span class="rtds-input-field__hint">

                            <span class="rtds-input-field__description" id="selectStrutturaVertice">
                                Ricerca struttura di riferimento
                            </span>

                        </span>

                    </div>
                    <div class="rtds-input-field rtds-gap-1 ">
                        <label for="procedimento" class="rtds-input-field__label">
                            Procedimento

                        </label>

                        <div class="rtds-input">
                            <input id="procedimento" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputProcedimento">
                        </div>

                        <span class="rtds-input-field__hint">

                            <span class="rtds-input-field__description" id="inputProcedimento">
                                Ricerca tipologia procedimento
                            </span>

                        </span>

                    </div>
                </div>

                <!-- ROW 4 - DEM0 -->
                <div class="rtds-field-row">
                    <div class="rtds-input-field rtds-select-field">
                        <label for="selectId" class="rtds-input-field__label">
                            Field demo 1

                        </label>

                        <div class="rtds-select">

                            <select id="selectId" class="" aria-describedBy="selectDemo1">
                                <option value="1">Text</option>
                                <option value="2">Option 1</option>
                                <option value="3">Option 2</option>
                                <option value="4">Option 3</option>
                                <option value="5">Option 4</option>
                                <option value="6">Option 5</option>

                            </select>
                        </div>

                        <span class="rtds-input-field__hint">

                            <span class="rtds-input-field__description" id="selectDemo1">
                                Ricerca struttura di riferimento
                            </span>

                        </span>

                    </div>
                    <div class="rtds-input-field rtds-gap-1 ">
                        <label for="demo2" class="rtds-input-field__label">
                            Field demo 2

                        </label>

                        <div class="rtds-input">
                            <input id="demo2" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputDemo2">
                        </div>

                        <span class="rtds-input-field__hint">

                            <span class="rtds-input-field__description" id="inputDemo2">
                                Ricerca tipologia procedimento
                            </span>

                        </span>

                    </div>
                    <div class="rtds-input-field rtds-select-field">
                        <label for="selectId" class="rtds-input-field__label">
                            Field demo 3

                        </label>

                        <div class="rtds-select">

                            <select id="selectId" class="" aria-describedBy="selectDemo3">
                                <option value="1">Text</option>
                                <option value="2">Option 1</option>
                                <option value="3">Option 2</option>
                                <option value="4">Option 3</option>
                                <option value="5">Option 4</option>
                                <option value="6">Option 5</option>

                            </select>
                        </div>

                        <span class="rtds-input-field__hint">

                            <span class="rtds-input-field__description" id="selectDemo3">
                                Ricerca struttura di riferimento
                            </span>

                        </span>

                    </div>
                    <div class="rtds-input-field rtds-gap-1 ">
                        <label for="demo4" class="rtds-input-field__label">
                            Field demo 4

                        </label>

                        <div class="rtds-input">
                            <input id="demo4" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputDemo4">
                        </div>

                        <span class="rtds-input-field__hint">

                            <span class="rtds-input-field__description" id="inputDemo4">
                                Ricerca tipologia procedimento
                            </span>

                        </span>

                    </div>
                </div>

                <!-- ROW ACTIONS -->
                <div class="rtds-form-actions rtds-flex rtds-justify-start">
                    <button type="submit" class="rtds-btn 
    rtds-btn--icon-right rtds-group/button rtds-btn--secondary">

                        Cerca

                        <svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#mini--chevron-right" />
                        </svg>

                    </button>

                </div>

            </div>

        </form>
    </div>

</div>
 
<div class="rtds-accordion rtds-p-0 rtds-accordion--widget">
    <h2 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-p-2 rtds-text-base rtds-background-03">
        <button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-flex-1 rtds-transition-all" aria-controls="accordionSearch-1" id="accordionSearch1id">
            <span class="rtds-accordion__trigger-label">
                Ricerca avanzata
            </span>

            <span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
                <svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
                    <use href="/icons.svg#mini--chevron-up" />
                </svg>

            </span>

        </button>
    </h2>
    <div id="accordionSearch-1" role="region" aria-labelledby="accordionSearch1id" class="rtds-accordion__pane rtds-transition-all rtds-px-2">
        
        <form name="search-form">

            <div class="rtds-grid rtds-gap-6">

                <!-- ROW 1 -->
                <div class="rtds-field-row">

                    <!-- FIELDSET DATA -->
                    <fieldset class="rtds-input-field rtds-input-fieldset">
                        <legend class="rtds-input-field__label">
                            Data atto
                        </legend>
                        <div class="rtds-grid sm:rtds-flex rtds-gap-4 sm:rtds-gap-6 sm:rtds-items-start">
                            {% render '@input-field',{inputId: 'attoStart',classes: 'sm:rtds-flex-1',hiddenLabel: true, inputType: 'date',label: 'Data inizio atto',inputDescription:'Anno inizio ricerca - formato gg/mm/aaaa', inputAriaDescribedBy:'inputDataInizioAtto'} ,true %}
                            {% render '@input-field',{inputId: 'attoEnd',classes: 'sm:rtds-flex-1',hiddenLabel: true, inputType: 'date',label: 'Data fine atto',inputDescription:'Anno fine ricerca - formato gg/mm/aaaa', inputAriaDescribedBy:'inputDataFineAtto'} ,true %}
                        </div>
                    </fieldset>
                    <!-- FIELDSET NUMERO ATTO -->
                    <fieldset class="rtds-input-field rtds-input-fieldset">
                        <legend class="rtds-input-field__label">
                            Numero atto
                        </legend>
                        <div class="rtds-grid sm:rtds-flex rtds-gap-4 sm:rtds-gap-6 sm:rtds-items-start">
                            {% render '@input-field',{inputId: 'attoNumberStart',classes: 'sm:rtds-flex-1',hiddenLabel: true, label: 'Numero atto - inizio',inputDescription:'Da numero', inputAriaDescribedBy:'inputNumeroAttoInizio'} ,true %}
                            {% render '@input-field',{inputId: 'attoNumberEnd',classes: 'sm:rtds-flex-1',hiddenLabel: true, label: 'Numero atto - fine',inputDescription:'A numero', inputAriaDescribedBy:'inputNumeroAttoFine'} ,true %}
                        </div>
                    </fieldset>
                </div>

                <!-- ROW 2 -->
                <div class="rtds-field-row">
                    {% render '@input-field',{inputId: 'oggetto',label: 'Oggetto',inputDescription:'Ricerca esatta del testo inserito', inputAriaDescribedBy:'inputOggetto'} ,true %}
                    {% render '@select-field',{inputId: 'assessore',label: 'Assessore',selectDescription:'Seleziona nome dell\'assessore', selectAriaDescribedBy:'selectAssessore'} ,true %}
                    {% render '@select-field',{inputId: 'atto',label: 'Tipologia Atto',selectDescription:'Ricerca tipologia atto', selectAriaDescribedBy:'selectAtto'} ,true %}
                </div>

                <!-- ROW 3 -->
                <div class="rtds-field-row">
                   {% render '@select-field',{inputId: 'strutturaVertice',label: 'Struttura di vertice',selectDescription:'Ricerca struttura di riferimento', selectAriaDescribedBy:'selectStrutturaVertice'} ,true %}
                   {% render '@input-field',{inputId: 'procedimento',label: 'Procedimento',inputDescription:'Ricerca tipologia procedimento', inputAriaDescribedBy:'inputProcedimento'} ,true %}
                </div>

                <!-- ROW 4 - DEM0 -->
                <div class="rtds-field-row">
                   {% render '@select-field',{inputId: 'demo1',label: 'Field demo 1',selectDescription:'Ricerca struttura di riferimento', selectAriaDescribedBy:'selectDemo1'} ,true %}
                   {% render '@input-field',{inputId: 'demo2',label: 'Field demo 2',inputDescription:'Ricerca tipologia procedimento', inputAriaDescribedBy:'inputDemo2'} ,true %}
                   {% render '@select-field',{inputId: 'demo3',label: 'Field demo 3',selectDescription:'Ricerca struttura di riferimento', selectAriaDescribedBy:'selectDemo3'} ,true %}
                   {% render '@input-field',{inputId: 'demo4',label: 'Field demo 4',inputDescription:'Ricerca tipologia procedimento', inputAriaDescribedBy:'inputDemo4'} ,true %}
                </div>

                <!-- ROW ACTIONS -->
                <div class="rtds-form-actions rtds-flex rtds-justify-start">
                    {% render '@button--icon-right',{buttonType: 'submit',label: 'Cerca', icon: 'mini--chevron-right', classes: 'rtds-btn--secondary', iconSize: 'rtds-w-5 rtds-h-5'} ,true %}
                </div>
            
            </div>

        </form>
    </div>

</div>
 
/* No context defined. */
  • Content: 
    /* WIDGET SEARCH */
@layer components {
    .rtds-field-row {
        @apply rtds-grid lg:rtds-flex lg:rtds-gap-4 xl:rtds-gap-6;
    }

    :where(.rtds-field-row > *) {
        @apply lg:rtds-flex-1 lg:rtds-max-w-1/2;
    }
}
  • URL: /components/raw/widget-search/widget-search.css
  • Filesystem Path: components/07-widgets/widget-components/widget-search/widget-search.css
  • Size: 226 Bytes

Lista demo di campi ricerca, con struttura e griglie utilizzabili.

Ogni riga è implementata con un wrapper con classe rtds-field-row.

I campi multi value come data e numero atto, sono implementati attraverso dei fieldset con una serie di utility classes, sono presenti dei label visivamente nascosti sugli input, per ragioni di accessibilità.

I campi type=date utilizzano il funzionamento html nativo, e non un datepicker custom, poiché risulta essere più compatibile con le tecnologie assistive.