number
Campo di tipo numerico. Va sempre utilizzato con gli attributi minlength="5" maxlength="5".
Componente che gestisce tutte le form e relativi campi all'interno di Inbank. I controlli di obbligatorietà e tipo di dato inserito vengono effettuati lato client dal browser con la sintassi HTML5, fatta eccezione per alcuni controlli particolari che vengono fatti tramite Javascript.
La componente .c-fiedset, in quanto fieldset necessita del tag legend per l'accessibilità della pagina.
Stili default
<fieldset class="c-fieldset">
<legend><span>Questa è una legend</span></legend>
</fieldset>Nel caso in cui gli errori provengano da server è possibile utilizzare l'attributo data-has-error sul campo, riportando anche la tipologia di errore in prossimità del campo con l'ausilio della componente .c-alert.
Stili default
<fieldset class="c-fieldset">
<p>
<label for="">Campo con errore server</label>
<input data-has-error id="" type="text" required>
<span class="c-alert c-alert--error">Io sono un campo con errore già al caricamento</span>
</p>
</fieldset>Gli attributi data-type consentono di estendere i controlli base di HTML5 ad alcuni tipi di dato, come IBAN, codici fiscali ecc..
Il controllo e il pattern di dato viene gestito via client tramite Javascript.
Stili default
Estensioni e modificatori
number
Campo di tipo numerico. Va sempre utilizzato con gli attributi minlength="5" maxlength="5".
currency
Campo di tipo importo. È meglio inserire una maxlength. Nel caso l'importo abbia il decimale aggiungere l'attributo data-opts="decimals".
iban
Campo di tipo IBAN con relativi controlli client.
tax-code|vat
Campo di tipo codice fiscale-partita iva. Va sempre specificata una maxlength="16" (nel caso di codice fiscale) o relativa lunghezza per le partite iva.
<fieldset class="c-fieldset">
<p>
<label for="">Campo con attributi data-type</label>
<input id="" type="text" data-type="[modifier class]">
</p>
</fieldset>Stili default
Estensioni e modificatori
.c-fieldset__wide
La classe .c-fieldset__wide sull'elemento p interno alla componente, permette di riorganizzare le spaziature all'interno della riga, eliminando il bordo inferiore tipico della label.
.c-fieldset__flat
La classe .c-fieldset__flat sull'elemento p interno alla componente, permette di renderizzare label + input come un'unica riga, la cui etichetta occupa il 100% dello spazio.
.c-fieldset__col
La classe .c-fieldset__col sull'elemento p interno alla componente, rimuove l'affiancamento dei campi alle etichette e mostra tutto in maniera sequenziale.
<fieldset class="c-fieldset">
<p class="[modifier class]">
<label for="">Campo con attributi data-type</label>
<input id="" type="text" data-type="[modifier class]">
</p>
</fieldset>La classe .c-fieldset__shifted su un elemento all'interno del tag p interno alla componente, permette di allineare l'elemento a destra incolonnandolo sotto ai campi di testo, select o textarea.
Stili default
<fieldset class="c-fieldset">
<p>
<label for="ord_nome_fld">Ordinante</label>
<input name="ord_nome_fld" id="ord_nome_fld" type="text" maxlength="30" required>
<span class="c-fieldset__wide c-fieldset__shifted">
<label for="ord_esito_chb">
<input name="ord_esito_chb" id="ord_esito_chb" type="checkbox"> Richiesta esito ordinante
<small class="c-inline-help c-inline-help--reverse">
<i class="c-inline-help__toggler c-icon-s c-icon--info-circle"></i>
<em class="c-inline-help__content">La Banca invia l´esito all´ordinante solo se viene richiesto. Informa l´utente se il bonifico è stato eseguito o rifiutato. Per visualizzare l´esito utilizzare la funzione esiti.</em>
</small>
</label>
</span>
</p>
</fieldset>La componente può essere personalizzata tramite un'icona che ne rappresenta il contenuto, grazie alla componente .c-icon-*. Per utilizzare al meglio questa sotto-componente è necessario l'utilizzo dell'estensione .c-fieldset--shifted sull'elemento padre.
Stili default
<fieldset class="c-fieldset c-fieldset--shifted">
<legend><span>Numero principale</span></legend>
<div class="c-fieldset__icon">
<i class="c-icon-r c-icon--at"></i>
</div>
<p>
<label for="">Campo</label>
<input id="" type="text" required>
</p>
</fieldset>La dropzone ridefinisce il classico controllo type="file" mettendo a disposizione dell'utente un'interfaccia più completa per la gestione degli upload. La componente gestisce upload multipli tramite l'utilizzo dell'attributo multiple e permette la cancellazione di un file caricato con il controllo dedicato.
Stili default
Estensioni e modificatori
multiple
Caricamento multiplo di file.
<fieldset class="c-fieldset">
<p>
<label for="doc_importa_fle">Importa file</label>
<input id="doc_importa_fle" name="file_name_uploaded" [modifier class] type="file" required>
</p>
</fieldset>Componente di ricerca generica composta da una label nascosta, un campo di testo type="text", un pulsante di reset type="reset" e un pulsante per avviare la ricerca button. E' utilizzata nel menu di Inbank per effettuare delle ricerche in tempo reale sulle voci di menu, tuttavia può essere utilizzata anche per avviare delle ricerca su server grazie al tag form.
Stili default
<div data-primary-live-search class="c-search c-search--live">
<form>
<p>
<input autocomplete="off" id="search" placeholder="Cerca nel menu..." type="text" value="">
<label class="c-icon-s c-icon--search" for="search">Cerca la funzione</label>
<button type="reset" value="Svuota campo" aria-label="Annulla ricerca">✕</button>
<button aria-controls="function-list" class="u-visuallyhidden" type="button" value="Cerca" name="button">Cerca</button>
</p>
</form>
</div>Sfruttando un controllo type="radio", la componente viene visualizzata come uno switch tipico dei sistemi iOS. Per il corretto funzionamento è necessario che gli attributi for dell'etichetta e id del controllo abbiano lo stesso valore.
È possibile disabilitare il controllo utilizzando l'attributo disabled sul controllo type="radio".
Stili default
<span class="c-switch">
<input id="switch" name="switch" type="checkbox" value="true">
<label for="switch" class="c-switch__slider">Attiva/disattiva</label>
</span>
<span class="c-switch">
<input id="switch2" name="switch" type="checkbox" value="true" disabled>
<label for="switch2" class="c-switch__slider">Attiva/disattiva</label>
</span>Tramite l'utilizzo della componente c-icon è possibile cambiare aspetto alle tradizionali checkbox. Non è possibile utilizzare la componente in tutti i contesti e l'ordine degli elementi deve essere rispettato come nell'esempio.
Stili default
<p><input id="dismiss-onboarding" data-dismiss-persistent="" type="checkbox" class="c-checkbox-custom"><label for="dismiss-onboarding">Non mostrare più</label></p>Una ruota dei colori che consente all'utente di scegliere fra una palette il colori predefiniti. Utilizzato nella configurazione widget sfrutta un controllo type="radio" per selezionare la preferenza. Nel caso di selezione di colori multipli è possibile sostituire il controllo con uno di tipo type="checkbox".
La precedente versione gestiva 12 colori mentre nella nuova sono stati ridotti a 8.
Stili default
<ul class="c-color-wheel">
<li><input id="palette1" name="colorWidget" value="01" type="radio"/> <label for="palette1">Palette 1</label></li>
<li><input id="palette2" name="colorWidget" value="02" type="radio"/> <label for="palette2">Palette 2</label></li>
<li><input id="palette3" name="colorWidget" value="03" type="radio"/> <label for="palette3">Palette 3</label></li>
<li><input id="palette4" name="colorWidget" value="04" type="radio"/> <label for="palette4">Palette 4</label></li>
<li><input id="palette5" name="colorWidget" value="05" type="radio"/> <label for="palette5">Palette 5</label></li>
<li><input id="palette6" name="colorWidget" value="06" type="radio"/> <label for="palette6">Palette 6</label></li>
<li><input id="palette7" name="colorWidget" value="07" type="radio"/> <label for="palette7">Palette 7</label></li>
<li><input id="palette8" name="colorWidget" value="08" type="radio"/> <label for="palette8">Palette 8</label></li>
</ul>Un tastierino numerico o albafetico utilizzato nel sistema di sicurezza. Ogni pulsante è un button al cui interno è presente un'immagine (per ragioni di sicurezza).
Stili default
<div class="c-keypad" id="c-keypad-identifier">
<ol class="c-keypad__buttons">
<li><button type="button" value="a"><img src="/images/pad/pad-0.svg" alt=""></button></li>
<li><button type="button" value="b"><img src="/images/pad/pad-1.svg" alt=""></button></li>
<li><button type="button" value="c"><img src="/images/pad/pad-2.svg" alt=""></button></li>
<li><button type="button" value="d"><img src="/images/pad/pad-3.svg" alt=""></button></li>
<li><button type="button" value="e"><img src="/images/pad/pad-4.svg" alt=""></button></li>
<li><button type="button" value="f"><img src="/images/pad/pad-5.svg" alt=""></button></li>
<li><button type="button" value="g"><img src="/images/pad/pad-6.svg" alt=""></button></li>
<li><button type="button" value="h"><img src="/images/pad/pad-7.svg" alt=""></button></li>
<li><button type="button" value="i"><img src="/images/pad/pad-8.svg" alt=""></button></li>
<li><button type="button" value="j"><img src="/images/pad/pad-9.svg" alt=""></button></li>
</ol>
</div>La componente sfrutta dei controlli di tipo type="radio" per mostrare scelte multiple all'utente accompagnate da un'iconografia. È possibile impostare una multipla sostituendo il controllo type="radio" con un controlli type="checkbox".
Stili default
<label class="c-pretty-selector" for="num_predefinito1_rad">
<input id="num_predefinito1_rad" aria-labelledby="ric_numero_rad" type="radio" name="numeroCartaPrepagataSelezionata" value="3466648460" required>
<i class="c-icon-r c-icon--credit-card"></i>
<span>Franceschini <br> 111111111111</span>
</label>Deprecated: si suggerisce l'utilizzo della componente c-checkbox-custom
Deprecated: componente utilizzata sul trading
Deprecated: componente utilizzata per il mostra/nascondi password. Funzionalità poi rimossa.
Deprecated: componente utilizzata dal trading. Si invita all'uso di c-fieldset per le form.