Input text field

Reviewed

HTML
View
Context
Info
Notes


        
        
            <!-- Default -->
<label for="text-field" class="" aria-label="">

    Label <span class="required-marker" aria-hidden="true">*</span>

    <input id="text-field" type="text" class="" placeholder="" value="" aria-describedby="text-note">

    <p class="c-field__note " id="text-note">
        Compila il campo
    </p>

</label>


        
            <!-- Date -->
<label for="date-field" class="is-datepicker" aria-label="Scegli la data">

    Andata <span class="required-marker" aria-hidden="true">*</span>

    <input id="date-field" type="date" class="" placeholder="" value="" aria-describedby="date-note">

    <p class="c-field__note " id="date-note">
        Seleziona la data
    </p>

</label>


        
            <!-- Negative -->
<label for="text-field-error" class="is-negative" aria-label="">

    Label <span class="required-marker" aria-hidden="true">*</span>

    <input id="text-field-error" type="text" class="" placeholder="" value="" aria-describedby="email-note">

    <p class="c-field__note " id="email-note">
        L'indirizzo email sembra non essere scritto correttamente
    </p>

</label>


        
            <!-- Positive -->
<label for="text-field-positive" class="is-positive" aria-label="">

    Label <span class="required-marker" aria-hidden="true">*</span>

    <input id="text-field-positive" type="text" class="" placeholder="" value="" aria-describedby="email-note">

    <p class="c-field__note " id="email-note">
        Compila il campo
    </p>

</label>


        
            <!-- File -->
<label for="file-input" class="is-positive" aria-label="">

    Allega file <span class="required-marker" aria-hidden="true">*</span>

    <input id="file-input" type="file" class="" placeholder="" value="" aria-describedby="file-note" multiple>

    <p class="c-field__note " id="file-note">
        Carica il file
    </p>

</label>

<p class="c-field__note" id="" aria-hidden="true">
</p>


        
            <!-- Loading -->
<label for="text-field" class="" aria-label="">

    Label <span class="required-marker" aria-hidden="true">*</span>

    <input id="text-field" type="text" class="is-loading" placeholder="" value="" aria-describedby="text-note">

    <p class="c-field__note " id="text-note">
        Compila il campo
    </p>

</label>


        
            <!-- Disabled -->
<label for="text-field" class="" aria-label="">

    Label <span class="required-marker" aria-hidden="true">*</span>

    <input id="text-field" type="text" class="" placeholder="" value="" aria-describedby="text-note" disabled>

    <p class="c-field__note " id="text-note">
        Compila il campo
    </p>

</label>


        
            <!-- Password -->
<label for="password-field" class="has-password-button" aria-label="">

    Password <span class="required-marker" aria-hidden="true">*</span>

    <input id="password-field" type="password" class="" placeholder="" value="" aria-describedby="password-text-note" autocomplete="new-password">

    <button type="button" class="js-pwd-button" data-show-text="Mostra" data-hide-text="Nascondi" aria-label="Mostra password">Mostra</button>

    <p class="c-field__note " id="password-text-note">
        Definisci una password di almeno 8 caratteri di cui 1 MAIUSCOLO e 1 numero
    </p>

</label>


        
            <!-- License Plate -->
<label for="license-plate-field" class="" aria-label="">

    Targa

    <div class="input-license-plate">
        <input id="license-plate-field" type="text" class="input-license-plate" placeholder="" value="" aria-describedby="license-plate-note">
    </div>

    <div class="c-field__note " id="license-plate-note">
        La targa deve rispettare lo <button type="button" class="c-button c-button--as-link js-fr-dialogmodal-open" aria-controls="dialog-license-plate-info"><strong>standard europeo</strong></button> (es. AA000AA)
    </div>

</label>

<div class="c-dialog js-fr-dialogmodal " id="dialog-license-plate-info">
    <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-license-plate-info-title">
        <div role="document">

            <p class="c-dialog__title" id="dialog-license-plate-info-title" aria-hidden="true">
                La targa deve rispettare lo standard europeo
            </p>

            <p><strong>La targa deve rispettare lo standard europeo</strong></p>
            <p>Il formato standard per le targhe automobilistiche europee include una striscia blu sul lato sinistro che mostra il simbolo dell'UE (un cerchio di 12 stelle) e il codice del paese dello stato membro. Il resto della targa presenta una serie di caratteri unici per ogni autoveicolo, con questi standard:</p>
            <ul class='c-list--bulleted u-mt-space-8'>
                <li>lunghezza minima 5</li>
                <li>lunghezza massima 10</li>
                <li>numeri 0-9</li>
                <li>lettere A-Z</li>
            </ul>

            <button type="button" class="c-dialog__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
                <svg class="c-icon c-icon--32">
                    <use xlink:href="#ic_close_black_24px"></use>
                </svg> </button>
        </div>
    </div>
</div>


        
            <!-- License Plate Negative -->
<label for="license-plate-field" class="is-negative" aria-label="">

    Targa

    <div class="input-license-plate">
        <input id="license-plate-field" type="text" class="input-license-plate" placeholder="" value="" aria-describedby="license-plate-note">
    </div>

    <div class="c-field__note " id="license-plate-note">
        <p class="u-color-text-100">La targa deve rispettare lo <button type="button" class="c-button c-button--as-link js-fr-dialogmodal-open" aria-controls="dialog-license-plate-info"><strong>standard europeo</strong></button> (es. AA000AA)</p>
        <p>La targa non rispetta il formato richiesto.</p>
    </div>

</label>

<div class="c-dialog js-fr-dialogmodal " id="dialog-license-plate-info">
    <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-license-plate-info-title">
        <div role="document">

            <p class="c-dialog__title" id="dialog-license-plate-info-title" aria-hidden="true">
                La targa deve rispettare lo standard europeo
            </p>

            <p><strong>La targa deve rispettare lo standard europeo</strong></p>
            <p>Il formato standard per le targhe automobilistiche europee include una striscia blu sul lato sinistro che mostra il simbolo dell'UE (un cerchio di 12 stelle) e il codice del paese dello stato membro. Il resto della targa presenta una serie di caratteri unici per ogni autoveicolo, con questi standard:</p>
            <ul class='c-list--bulleted u-mt-space-8'>
                <li>lunghezza minima 5</li>
                <li>lunghezza massima 10</li>
                <li>numeri 0-9</li>
                <li>lettere A-Z</li>
            </ul>

            <button type="button" class="c-dialog__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
                <svg class="c-icon c-icon--32">
                    <use xlink:href="#ic_close_black_24px"></use>
                </svg> </button>
        </div>
    </div>
</div>


        <!-- Default -->
<label 
  for="{{ label_id }}" 
  class="{{ label_class }}" 
  aria-label="{{ screen-reader-text }}"
  >

  {{{ label_message }}} {{#if atom-input.required}}<span class="required-marker" aria-hidden="true">*</span>{{/if}}
  {{#if label_has_tooltip}} <span class="c-tooltip--24h" data-js-tooltip-label="Espandi per sapere di più"
    data-js-tooltip-icon="ic_error_orange_24px" data-js-bubble-class-position="c-tooltip__bubble--up">
    <p data-toggletip><strong>Attenzione</strong>non è possibile acquistare con meno di 24 ore di anticipo dall'orario di
      inizio della sosta.</p>
  </span>{{/if}}

  <input 
    id="{{ atom-input.id }}" 
    type="{{ atom-input.type }}"
    class="{{ atom-input.class }}"
    placeholder="{{ atom-input.placeholder }}" 
    value="{{ atom-input.value }}"

    {{#if atom-input.hasNote}}
      aria-describedby="{{ atom-input.describedby }}" 
    {{/if}}

    {{#if atom-input.isInvalid}}
      aria-invalid=”true”
    {{/if}}

    {{#if atom-input.isReadonly}}
      readonly
    {{/if}}

    {{#if atom-input.isDisabled}}
      disabled
    {{/if}}

    {{#if atom-input.jsEvent }}
      {{{ atom-input.jsEvent }}}
    {{/if}}

    {{#if atom-input.maxLength }}
      maxlength="{{ atom-input.maxLength }}"
    {{/if}}

    {{#if atom-input.multiple }}
      multiple
    {{/if}}

    {{#if atom-input.name }}
      name="{{ atom-input.name }}"
    {{/if}}
    
    {{#if atom-input.min-date}}
      min="{{ atom-input.min-date }}"
    {{/if}}

    {{#if atom-input.autocomplete}}
      autocomplete="{{ atom-input.autocomplete }}"
    {{/if}}

  >
  
  {{#if hasCancelButton}}
    <button type="button" aria-label="Elimina questo campo"><svg class="c-icon c-icon--18"><use xlink:href="#ic_cancel_black_24px"></use></svg></button>
  {{/if}}

  {{#if hasPasswordButton}}
    <button type="button" class="js-pwd-button" data-show-text="Mostra" data-hide-text="Nascondi" aria-label="Mostra password">Mostra</button>
  {{/if}}

  {{#if atom-input.hasNote}}
  <p class="c-field__note {{ note_class }}" id="{{ note_id }}">
    {{{ note_message }}}
  </p>
  {{/if}}

</label>

{{#if file_list}}
<p class="c-field__note" id="{{ this.file_field_id }}" aria-hidden="true">
  {{!-- Qui dentro viene stampata la lista dei file --}}
</p>
{{/if}}

<!-- Date -->
<label 
  for="{{ label_id }}" 
  class="{{ label_class }}" 
  aria-label="{{ screen-reader-text }}"
  >

  {{{ label_message }}} {{#if atom-input.required}}<span class="required-marker" aria-hidden="true">*</span>{{/if}}
  {{#if label_has_tooltip}} <span class="c-tooltip--24h" data-js-tooltip-label="Espandi per sapere di più"
    data-js-tooltip-icon="ic_error_orange_24px" data-js-bubble-class-position="c-tooltip__bubble--up">
    <p data-toggletip><strong>Attenzione</strong>non è possibile acquistare con meno di 24 ore di anticipo dall'orario di
      inizio della sosta.</p>
  </span>{{/if}}

  <input 
    id="{{ atom-input.id }}" 
    type="{{ atom-input.type }}"
    class="{{ atom-input.class }}"
    placeholder="{{ atom-input.placeholder }}" 
    value="{{ atom-input.value }}"

    {{#if atom-input.hasNote}}
      aria-describedby="{{ atom-input.describedby }}" 
    {{/if}}

    {{#if atom-input.isInvalid}}
      aria-invalid=”true”
    {{/if}}

    {{#if atom-input.isReadonly}}
      readonly
    {{/if}}

    {{#if atom-input.isDisabled}}
      disabled
    {{/if}}

    {{#if atom-input.jsEvent }}
      {{{ atom-input.jsEvent }}}
    {{/if}}

    {{#if atom-input.maxLength }}
      maxlength="{{ atom-input.maxLength }}"
    {{/if}}

    {{#if atom-input.multiple }}
      multiple
    {{/if}}

    {{#if atom-input.name }}
      name="{{ atom-input.name }}"
    {{/if}}
    
    {{#if atom-input.min-date}}
      min="{{ atom-input.min-date }}"
    {{/if}}

    {{#if atom-input.autocomplete}}
      autocomplete="{{ atom-input.autocomplete }}"
    {{/if}}

  >
  
  {{#if hasCancelButton}}
    <button type="button" aria-label="Elimina questo campo"><svg class="c-icon c-icon--18"><use xlink:href="#ic_cancel_black_24px"></use></svg></button>
  {{/if}}

  {{#if hasPasswordButton}}
    <button type="button" class="js-pwd-button" data-show-text="Mostra" data-hide-text="Nascondi" aria-label="Mostra password">Mostra</button>
  {{/if}}

  {{#if atom-input.hasNote}}
  <p class="c-field__note {{ note_class }}" id="{{ note_id }}">
    {{{ note_message }}}
  </p>
  {{/if}}

</label>

{{#if file_list}}
<p class="c-field__note" id="{{ this.file_field_id }}" aria-hidden="true">
  {{!-- Qui dentro viene stampata la lista dei file --}}
</p>
{{/if}}

<!-- Negative -->
<label 
  for="{{ label_id }}" 
  class="{{ label_class }}" 
  aria-label="{{ screen-reader-text }}"
  >

  {{{ label_message }}} {{#if atom-input.required}}<span class="required-marker" aria-hidden="true">*</span>{{/if}}
  {{#if label_has_tooltip}} <span class="c-tooltip--24h" data-js-tooltip-label="Espandi per sapere di più"
    data-js-tooltip-icon="ic_error_orange_24px" data-js-bubble-class-position="c-tooltip__bubble--up">
    <p data-toggletip><strong>Attenzione</strong>non è possibile acquistare con meno di 24 ore di anticipo dall'orario di
      inizio della sosta.</p>
  </span>{{/if}}

  <input 
    id="{{ atom-input.id }}" 
    type="{{ atom-input.type }}"
    class="{{ atom-input.class }}"
    placeholder="{{ atom-input.placeholder }}" 
    value="{{ atom-input.value }}"

    {{#if atom-input.hasNote}}
      aria-describedby="{{ atom-input.describedby }}" 
    {{/if}}

    {{#if atom-input.isInvalid}}
      aria-invalid=”true”
    {{/if}}

    {{#if atom-input.isReadonly}}
      readonly
    {{/if}}

    {{#if atom-input.isDisabled}}
      disabled
    {{/if}}

    {{#if atom-input.jsEvent }}
      {{{ atom-input.jsEvent }}}
    {{/if}}

    {{#if atom-input.maxLength }}
      maxlength="{{ atom-input.maxLength }}"
    {{/if}}

    {{#if atom-input.multiple }}
      multiple
    {{/if}}

    {{#if atom-input.name }}
      name="{{ atom-input.name }}"
    {{/if}}
    
    {{#if atom-input.min-date}}
      min="{{ atom-input.min-date }}"
    {{/if}}

    {{#if atom-input.autocomplete}}
      autocomplete="{{ atom-input.autocomplete }}"
    {{/if}}

  >
  
  {{#if hasCancelButton}}
    <button type="button" aria-label="Elimina questo campo"><svg class="c-icon c-icon--18"><use xlink:href="#ic_cancel_black_24px"></use></svg></button>
  {{/if}}

  {{#if hasPasswordButton}}
    <button type="button" class="js-pwd-button" data-show-text="Mostra" data-hide-text="Nascondi" aria-label="Mostra password">Mostra</button>
  {{/if}}

  {{#if atom-input.hasNote}}
  <p class="c-field__note {{ note_class }}" id="{{ note_id }}">
    {{{ note_message }}}
  </p>
  {{/if}}

</label>

{{#if file_list}}
<p class="c-field__note" id="{{ this.file_field_id }}" aria-hidden="true">
  {{!-- Qui dentro viene stampata la lista dei file --}}
</p>
{{/if}}

<!-- Positive -->
<label 
  for="{{ label_id }}" 
  class="{{ label_class }}" 
  aria-label="{{ screen-reader-text }}"
  >

  {{{ label_message }}} {{#if atom-input.required}}<span class="required-marker" aria-hidden="true">*</span>{{/if}}
  {{#if label_has_tooltip}} <span class="c-tooltip--24h" data-js-tooltip-label="Espandi per sapere di più"
    data-js-tooltip-icon="ic_error_orange_24px" data-js-bubble-class-position="c-tooltip__bubble--up">
    <p data-toggletip><strong>Attenzione</strong>non è possibile acquistare con meno di 24 ore di anticipo dall'orario di
      inizio della sosta.</p>
  </span>{{/if}}

  <input 
    id="{{ atom-input.id }}" 
    type="{{ atom-input.type }}"
    class="{{ atom-input.class }}"
    placeholder="{{ atom-input.placeholder }}" 
    value="{{ atom-input.value }}"

    {{#if atom-input.hasNote}}
      aria-describedby="{{ atom-input.describedby }}" 
    {{/if}}

    {{#if atom-input.isInvalid}}
      aria-invalid=”true”
    {{/if}}

    {{#if atom-input.isReadonly}}
      readonly
    {{/if}}

    {{#if atom-input.isDisabled}}
      disabled
    {{/if}}

    {{#if atom-input.jsEvent }}
      {{{ atom-input.jsEvent }}}
    {{/if}}

    {{#if atom-input.maxLength }}
      maxlength="{{ atom-input.maxLength }}"
    {{/if}}

    {{#if atom-input.multiple }}
      multiple
    {{/if}}

    {{#if atom-input.name }}
      name="{{ atom-input.name }}"
    {{/if}}
    
    {{#if atom-input.min-date}}
      min="{{ atom-input.min-date }}"
    {{/if}}

    {{#if atom-input.autocomplete}}
      autocomplete="{{ atom-input.autocomplete }}"
    {{/if}}

  >
  
  {{#if hasCancelButton}}
    <button type="button" aria-label="Elimina questo campo"><svg class="c-icon c-icon--18"><use xlink:href="#ic_cancel_black_24px"></use></svg></button>
  {{/if}}

  {{#if hasPasswordButton}}
    <button type="button" class="js-pwd-button" data-show-text="Mostra" data-hide-text="Nascondi" aria-label="Mostra password">Mostra</button>
  {{/if}}

  {{#if atom-input.hasNote}}
  <p class="c-field__note {{ note_class }}" id="{{ note_id }}">
    {{{ note_message }}}
  </p>
  {{/if}}

</label>

{{#if file_list}}
<p class="c-field__note" id="{{ this.file_field_id }}" aria-hidden="true">
  {{!-- Qui dentro viene stampata la lista dei file --}}
</p>
{{/if}}

<!-- File -->
<label 
  for="{{ label_id }}" 
  class="{{ label_class }}" 
  aria-label="{{ screen-reader-text }}"
  >

  {{{ label_message }}} {{#if atom-input.required}}<span class="required-marker" aria-hidden="true">*</span>{{/if}}
  {{#if label_has_tooltip}} <span class="c-tooltip--24h" data-js-tooltip-label="Espandi per sapere di più"
    data-js-tooltip-icon="ic_error_orange_24px" data-js-bubble-class-position="c-tooltip__bubble--up">
    <p data-toggletip><strong>Attenzione</strong>non è possibile acquistare con meno di 24 ore di anticipo dall'orario di
      inizio della sosta.</p>
  </span>{{/if}}

  <input 
    id="{{ atom-input.id }}" 
    type="{{ atom-input.type }}"
    class="{{ atom-input.class }}"
    placeholder="{{ atom-input.placeholder }}" 
    value="{{ atom-input.value }}"

    {{#if atom-input.hasNote}}
      aria-describedby="{{ atom-input.describedby }}" 
    {{/if}}

    {{#if atom-input.isInvalid}}
      aria-invalid=”true”
    {{/if}}

    {{#if atom-input.isReadonly}}
      readonly
    {{/if}}

    {{#if atom-input.isDisabled}}
      disabled
    {{/if}}

    {{#if atom-input.jsEvent }}
      {{{ atom-input.jsEvent }}}
    {{/if}}

    {{#if atom-input.maxLength }}
      maxlength="{{ atom-input.maxLength }}"
    {{/if}}

    {{#if atom-input.multiple }}
      multiple
    {{/if}}

    {{#if atom-input.name }}
      name="{{ atom-input.name }}"
    {{/if}}
    
    {{#if atom-input.min-date}}
      min="{{ atom-input.min-date }}"
    {{/if}}

    {{#if atom-input.autocomplete}}
      autocomplete="{{ atom-input.autocomplete }}"
    {{/if}}

  >
  
  {{#if hasCancelButton}}
    <button type="button" aria-label="Elimina questo campo"><svg class="c-icon c-icon--18"><use xlink:href="#ic_cancel_black_24px"></use></svg></button>
  {{/if}}

  {{#if hasPasswordButton}}
    <button type="button" class="js-pwd-button" data-show-text="Mostra" data-hide-text="Nascondi" aria-label="Mostra password">Mostra</button>
  {{/if}}

  {{#if atom-input.hasNote}}
  <p class="c-field__note {{ note_class }}" id="{{ note_id }}">
    {{{ note_message }}}
  </p>
  {{/if}}

</label>

{{#if file_list}}
<p class="c-field__note" id="{{ this.file_field_id }}" aria-hidden="true">
  {{!-- Qui dentro viene stampata la lista dei file --}}
</p>
{{/if}}

<!-- Loading -->
<label 
  for="{{ label_id }}" 
  class="{{ label_class }}" 
  aria-label="{{ screen-reader-text }}"
  >

  {{{ label_message }}} {{#if atom-input.required}}<span class="required-marker" aria-hidden="true">*</span>{{/if}}
  {{#if label_has_tooltip}} <span class="c-tooltip--24h" data-js-tooltip-label="Espandi per sapere di più"
    data-js-tooltip-icon="ic_error_orange_24px" data-js-bubble-class-position="c-tooltip__bubble--up">
    <p data-toggletip><strong>Attenzione</strong>non è possibile acquistare con meno di 24 ore di anticipo dall'orario di
      inizio della sosta.</p>
  </span>{{/if}}

  <input 
    id="{{ atom-input.id }}" 
    type="{{ atom-input.type }}"
    class="{{ atom-input.class }}"
    placeholder="{{ atom-input.placeholder }}" 
    value="{{ atom-input.value }}"

    {{#if atom-input.hasNote}}
      aria-describedby="{{ atom-input.describedby }}" 
    {{/if}}

    {{#if atom-input.isInvalid}}
      aria-invalid=”true”
    {{/if}}

    {{#if atom-input.isReadonly}}
      readonly
    {{/if}}

    {{#if atom-input.isDisabled}}
      disabled
    {{/if}}

    {{#if atom-input.jsEvent }}
      {{{ atom-input.jsEvent }}}
    {{/if}}

    {{#if atom-input.maxLength }}
      maxlength="{{ atom-input.maxLength }}"
    {{/if}}

    {{#if atom-input.multiple }}
      multiple
    {{/if}}

    {{#if atom-input.name }}
      name="{{ atom-input.name }}"
    {{/if}}
    
    {{#if atom-input.min-date}}
      min="{{ atom-input.min-date }}"
    {{/if}}

    {{#if atom-input.autocomplete}}
      autocomplete="{{ atom-input.autocomplete }}"
    {{/if}}

  >
  
  {{#if hasCancelButton}}
    <button type="button" aria-label="Elimina questo campo"><svg class="c-icon c-icon--18"><use xlink:href="#ic_cancel_black_24px"></use></svg></button>
  {{/if}}

  {{#if hasPasswordButton}}
    <button type="button" class="js-pwd-button" data-show-text="Mostra" data-hide-text="Nascondi" aria-label="Mostra password">Mostra</button>
  {{/if}}

  {{#if atom-input.hasNote}}
  <p class="c-field__note {{ note_class }}" id="{{ note_id }}">
    {{{ note_message }}}
  </p>
  {{/if}}

</label>

{{#if file_list}}
<p class="c-field__note" id="{{ this.file_field_id }}" aria-hidden="true">
  {{!-- Qui dentro viene stampata la lista dei file --}}
</p>
{{/if}}

<!-- Disabled -->
<label 
  for="{{ label_id }}" 
  class="{{ label_class }}" 
  aria-label="{{ screen-reader-text }}"
  >

  {{{ label_message }}} {{#if atom-input.required}}<span class="required-marker" aria-hidden="true">*</span>{{/if}}
  {{#if label_has_tooltip}} <span class="c-tooltip--24h" data-js-tooltip-label="Espandi per sapere di più"
    data-js-tooltip-icon="ic_error_orange_24px" data-js-bubble-class-position="c-tooltip__bubble--up">
    <p data-toggletip><strong>Attenzione</strong>non è possibile acquistare con meno di 24 ore di anticipo dall'orario di
      inizio della sosta.</p>
  </span>{{/if}}

  <input 
    id="{{ atom-input.id }}" 
    type="{{ atom-input.type }}"
    class="{{ atom-input.class }}"
    placeholder="{{ atom-input.placeholder }}" 
    value="{{ atom-input.value }}"

    {{#if atom-input.hasNote}}
      aria-describedby="{{ atom-input.describedby }}" 
    {{/if}}

    {{#if atom-input.isInvalid}}
      aria-invalid=”true”
    {{/if}}

    {{#if atom-input.isReadonly}}
      readonly
    {{/if}}

    {{#if atom-input.isDisabled}}
      disabled
    {{/if}}

    {{#if atom-input.jsEvent }}
      {{{ atom-input.jsEvent }}}
    {{/if}}

    {{#if atom-input.maxLength }}
      maxlength="{{ atom-input.maxLength }}"
    {{/if}}

    {{#if atom-input.multiple }}
      multiple
    {{/if}}

    {{#if atom-input.name }}
      name="{{ atom-input.name }}"
    {{/if}}
    
    {{#if atom-input.min-date}}
      min="{{ atom-input.min-date }}"
    {{/if}}

    {{#if atom-input.autocomplete}}
      autocomplete="{{ atom-input.autocomplete }}"
    {{/if}}

  >
  
  {{#if hasCancelButton}}
    <button type="button" aria-label="Elimina questo campo"><svg class="c-icon c-icon--18"><use xlink:href="#ic_cancel_black_24px"></use></svg></button>
  {{/if}}

  {{#if hasPasswordButton}}
    <button type="button" class="js-pwd-button" data-show-text="Mostra" data-hide-text="Nascondi" aria-label="Mostra password">Mostra</button>
  {{/if}}

  {{#if atom-input.hasNote}}
  <p class="c-field__note {{ note_class }}" id="{{ note_id }}">
    {{{ note_message }}}
  </p>
  {{/if}}

</label>

{{#if file_list}}
<p class="c-field__note" id="{{ this.file_field_id }}" aria-hidden="true">
  {{!-- Qui dentro viene stampata la lista dei file --}}
</p>
{{/if}}

<!-- Password -->
<label 
  for="{{ label_id }}" 
  class="{{ label_class }}" 
  aria-label="{{ screen-reader-text }}"
  >

  {{{ label_message }}} {{#if atom-input.required}}<span class="required-marker" aria-hidden="true">*</span>{{/if}}
  {{#if label_has_tooltip}} <span class="c-tooltip--24h" data-js-tooltip-label="Espandi per sapere di più"
    data-js-tooltip-icon="ic_error_orange_24px" data-js-bubble-class-position="c-tooltip__bubble--up">
    <p data-toggletip><strong>Attenzione</strong>non è possibile acquistare con meno di 24 ore di anticipo dall'orario di
      inizio della sosta.</p>
  </span>{{/if}}

  <input 
    id="{{ atom-input.id }}" 
    type="{{ atom-input.type }}"
    class="{{ atom-input.class }}"
    placeholder="{{ atom-input.placeholder }}" 
    value="{{ atom-input.value }}"

    {{#if atom-input.hasNote}}
      aria-describedby="{{ atom-input.describedby }}" 
    {{/if}}

    {{#if atom-input.isInvalid}}
      aria-invalid=”true”
    {{/if}}

    {{#if atom-input.isReadonly}}
      readonly
    {{/if}}

    {{#if atom-input.isDisabled}}
      disabled
    {{/if}}

    {{#if atom-input.jsEvent }}
      {{{ atom-input.jsEvent }}}
    {{/if}}

    {{#if atom-input.maxLength }}
      maxlength="{{ atom-input.maxLength }}"
    {{/if}}

    {{#if atom-input.multiple }}
      multiple
    {{/if}}

    {{#if atom-input.name }}
      name="{{ atom-input.name }}"
    {{/if}}
    
    {{#if atom-input.min-date}}
      min="{{ atom-input.min-date }}"
    {{/if}}

    {{#if atom-input.autocomplete}}
      autocomplete="{{ atom-input.autocomplete }}"
    {{/if}}

  >
  
  {{#if hasCancelButton}}
    <button type="button" aria-label="Elimina questo campo"><svg class="c-icon c-icon--18"><use xlink:href="#ic_cancel_black_24px"></use></svg></button>
  {{/if}}

  {{#if hasPasswordButton}}
    <button type="button" class="js-pwd-button" data-show-text="Mostra" data-hide-text="Nascondi" aria-label="Mostra password">Mostra</button>
  {{/if}}

  {{#if atom-input.hasNote}}
  <p class="c-field__note {{ note_class }}" id="{{ note_id }}">
    {{{ note_message }}}
  </p>
  {{/if}}

</label>

{{#if file_list}}
<p class="c-field__note" id="{{ this.file_field_id }}" aria-hidden="true">
  {{!-- Qui dentro viene stampata la lista dei file --}}
</p>
{{/if}}

<!-- License Plate -->
<label 
  for="{{ label_id }}" 
  class="{{ label_class }}" 
  aria-label="{{ screen-reader-text }}"
  >

  {{{ label_message }}} {{#if atom-input.required}}<span class="required-marker" aria-hidden="true">*</span>{{/if}}
  {{#if label_has_tooltip}} <span class="c-tooltip--24h" data-js-tooltip-label="Espandi per sapere di più"
    data-js-tooltip-icon="ic_error_orange_24px" data-js-bubble-class-position="c-tooltip__bubble--up">
    <p data-toggletip><strong>Attenzione</strong>non è possibile acquistare con meno di 24 ore di anticipo dall'orario di
      inizio della sosta.</p>
  </span>{{/if}}

  <div class="input-license-plate">
    <input 
      id="{{ atom-input.id }}" 
      type="{{ atom-input.type }}"
      class="{{ atom-input.class }}"
      placeholder="{{ atom-input.placeholder }}" 
      value="{{ atom-input.value }}"
  
      {{#if atom-input.hasNote}}
        aria-describedby="{{ atom-input.describedby }}" 
      {{/if}}
  
      {{#if atom-input.isInvalid}}
        aria-invalid=”true”
      {{/if}}
  
      {{#if atom-input.isReadonly}}
        readonly
      {{/if}}
  
      {{#if atom-input.isDisabled}}
        disabled
      {{/if}}
  
      {{#if atom-input.jsEvent }}
        {{{ atom-input.jsEvent }}}
      {{/if}}
  
      {{#if atom-input.maxLength }}
        maxlength="{{ atom-input.maxLength }}"
      {{/if}}
  
      {{#if atom-input.multiple }}
        multiple
      {{/if}}
  
      {{#if atom-input.name }}
        name="{{ atom-input.name }}"
      {{/if}}
      
      {{#if atom-input.autocomplete}}
        autocomplete="{{ atom-input.autocomplete }}"
      {{/if}}
    >
  </div>
  
  {{#if atom-input.hasNote}}
  <div class="c-field__note {{ note_class }}" id="{{ note_id }}">
    {{{ note_message }}}
  </div>
  {{/if}}

</label>

{{#notEqualTo has-dialog-license-plate-info false }}
{{ render "@dialog--dialog-license-plate-info" }}
{{/notEqualTo}}

<!-- License Plate Negative -->
<label 
  for="{{ label_id }}" 
  class="{{ label_class }}" 
  aria-label="{{ screen-reader-text }}"
  >

  {{{ label_message }}} {{#if atom-input.required}}<span class="required-marker" aria-hidden="true">*</span>{{/if}}
  {{#if label_has_tooltip}} <span class="c-tooltip--24h" data-js-tooltip-label="Espandi per sapere di più"
    data-js-tooltip-icon="ic_error_orange_24px" data-js-bubble-class-position="c-tooltip__bubble--up">
    <p data-toggletip><strong>Attenzione</strong>non è possibile acquistare con meno di 24 ore di anticipo dall'orario di
      inizio della sosta.</p>
  </span>{{/if}}

  <div class="input-license-plate">
    <input 
      id="{{ atom-input.id }}" 
      type="{{ atom-input.type }}"
      class="{{ atom-input.class }}"
      placeholder="{{ atom-input.placeholder }}" 
      value="{{ atom-input.value }}"
  
      {{#if atom-input.hasNote}}
        aria-describedby="{{ atom-input.describedby }}" 
      {{/if}}
  
      {{#if atom-input.isInvalid}}
        aria-invalid=”true”
      {{/if}}
  
      {{#if atom-input.isReadonly}}
        readonly
      {{/if}}
  
      {{#if atom-input.isDisabled}}
        disabled
      {{/if}}
  
      {{#if atom-input.jsEvent }}
        {{{ atom-input.jsEvent }}}
      {{/if}}
  
      {{#if atom-input.maxLength }}
        maxlength="{{ atom-input.maxLength }}"
      {{/if}}
  
      {{#if atom-input.multiple }}
        multiple
      {{/if}}
  
      {{#if atom-input.name }}
        name="{{ atom-input.name }}"
      {{/if}}
      
      {{#if atom-input.autocomplete}}
        autocomplete="{{ atom-input.autocomplete }}"
      {{/if}}
    >
  </div>
  
  {{#if atom-input.hasNote}}
  <div class="c-field__note {{ note_class }}" id="{{ note_id }}">
    {{{ note_message }}}
  </div>
  {{/if}}

</label>

{{#notEqualTo has-dialog-license-plate-info false }}
{{ render "@dialog--dialog-license-plate-info" }}
{{/notEqualTo}}


        
        
            /* Default */
{
  "name": "default",
  "label_id": "text-field",
  "label_message": "Label",
  "label_class": "",
  "atom-input": {
    "id": "text-field",
    "type": "text",
    "class": "",
    "placeholder": "",
    "required": true,
    "hasNote": true,
    "describedby": "text-note"
  },
  "note_id": "text-note",
  "note_message": "Compila il campo",
  "note_class": ""
}


        
            /* Date */
{
  "name": "default",
  "label_id": "date-field",
  "label_message": "Andata",
  "label_class": "is-datepicker",
  "atom-input": {
    "id": "date-field",
    "type": "date",
    "class": "",
    "placeholder": null,
    "required": true,
    "hasNote": true,
    "describedby": "date-note"
  },
  "note_id": "date-note",
  "note_message": "Seleziona la data",
  "note_class": "",
  "screen-reader-text": "Scegli la data"
}


        
            /* Negative */
{
  "name": "default",
  "label_id": "text-field-error",
  "label_message": "Label",
  "label_class": "is-negative",
  "atom-input": {
    "id": "text-field-error",
    "type": "text",
    "class": "",
    "placeholder": "",
    "required": true,
    "hasNote": true,
    "describedby": "email-note"
  },
  "note_id": "email-note",
  "note_message": "L'indirizzo email sembra non essere scritto correttamente",
  "note_class": ""
}


        
            /* Positive */
{
  "name": "default",
  "label_id": "text-field-positive",
  "label_message": "Label",
  "label_class": "is-positive",
  "atom-input": {
    "id": "text-field-positive",
    "type": "text",
    "class": "",
    "placeholder": "",
    "required": true,
    "hasNote": true,
    "describedby": "email-note"
  },
  "note_id": "email-note",
  "note_message": "Compila il campo",
  "note_class": ""
}


        
            /* File */
{
  "name": "default",
  "label_id": "file-input",
  "label_message": "Allega file",
  "label_class": "is-positive",
  "atom-input": {
    "id": "file-input",
    "type": "file",
    "class": "",
    "placeholder": "",
    "required": true,
    "hasNote": true,
    "describedby": "file-note",
    "multiple": true
  },
  "note_id": "file-note",
  "note_message": "Carica il file",
  "note_class": "",
  "file_list": {
    "file_field_id": "file_id"
  }
}


        
            /* Loading */
{
  "name": "default",
  "label_id": "text-field",
  "label_message": "Label",
  "label_class": "",
  "atom-input": {
    "id": "text-field",
    "type": "text",
    "class": "is-loading",
    "placeholder": "",
    "required": true,
    "hasNote": true,
    "describedby": "text-note"
  },
  "note_id": "text-note",
  "note_message": "Compila il campo",
  "note_class": ""
}


        
            /* Disabled */
{
  "name": "default",
  "label_id": "text-field",
  "label_message": "Label",
  "label_class": "",
  "atom-input": {
    "id": "text-field",
    "type": "text",
    "class": "",
    "placeholder": "",
    "required": true,
    "hasNote": true,
    "describedby": "text-note",
    "isDisabled": true
  },
  "note_id": "text-note",
  "note_message": "Compila il campo",
  "note_class": ""
}


        
            /* Password */
{
  "name": "password",
  "label_id": "password-field",
  "label_message": "Password",
  "label_class": "has-password-button",
  "atom-input": {
    "id": "password-field",
    "type": "password",
    "class": "",
    "placeholder": "",
    "required": true,
    "hasNote": true,
    "describedby": "password-text-note",
    "isDisabled": false,
    "autocomplete": "new-password"
  },
  "note_id": "password-text-note",
  "note_message": "Definisci una password di almeno 8 caratteri di cui 1 MAIUSCOLO e 1 numero",
  "note_class": "",
  "hasPasswordButton": true
}


        
            /* License Plate */
{
  "name": "license-plate",
  "label_id": "license-plate-field",
  "label_message": "Targa",
  "label_class": "",
  "atom-input": {
    "id": "license-plate-field",
    "type": "text",
    "class": "input-license-plate",
    "placeholder": "",
    "required": false,
    "hasNote": true,
    "describedby": "license-plate-note"
  },
  "note_id": "license-plate-note",
  "note_message": "La targa deve rispettare lo <button type=\"button\" class=\"c-button c-button--as-link js-fr-dialogmodal-open\" aria-controls=\"dialog-license-plate-info\"><strong>standard europeo</strong></button> (es. AA000AA)",
  "note_class": ""
}


        
            /* License Plate Negative */
{
  "name": "license-plate",
  "label_id": "license-plate-field",
  "label_message": "Targa",
  "label_class": "is-negative",
  "atom-input": {
    "id": "license-plate-field",
    "type": "text",
    "class": "input-license-plate",
    "placeholder": "",
    "required": false,
    "hasNote": true,
    "describedby": "license-plate-note"
  },
  "note_id": "license-plate-note",
  "note_message": "<p class=\"u-color-text-100\">La targa deve rispettare lo <button type=\"button\" class=\"c-button c-button--as-link js-fr-dialogmodal-open\" aria-controls=\"dialog-license-plate-info\"><strong>standard europeo</strong></button> (es. AA000AA)</p><p>La targa non rispetta il formato richiesto.</p>",
  "note_class": ""
}

No notes defined.