È disponibile il nuovo mdui 2 basato su Material Design 3 e Web Components, vai alla documentazione di mdui 2.

Text Field

I Text Field vengono usati comunemente nei moduli. I Text Field di mdui offrono funzioni come il conteggio dei caratteri e la validazione dei moduli.

Può essere utilizzato in combinazione con il sistema di layout a griglia per il layout dei moduli.

Modalità d'uso

Inizializzazione automatica al termine del caricamento della pagina. Per i Text Field generati dinamicamente, è necessario chiamare mdui.mutation() per l'inizializzazione.

Colori

Utilizza il colore di accento.

Letture correlate

Linee guida di Material Design: Componenti - Text Field

Stile

Text Field a riga singola

Ecco un esempio di Text Field molto semplice:

Esempio

<div class="mdui-textfield">
  <input class="mdui-textfield-input" type="text" placeholder="User Name"/>
</div>

Etichetta fissa

Esempio

<div class="mdui-textfield">
  <label class="mdui-textfield-label">User Name</label>
  <input class="mdui-textfield-input" type="text"/>
</div>

Etichetta fluttuante

Esempio

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" />
</div>

Stato disabilitato

Aggiungi l'attributo disabled all'elemento .mdui-textfield-input per disabilitare il Text Field.

Esempio

<div class="mdui-textfield">
  <input class="mdui-textfield-input" type="text" disabled placeholder="User Name"/>
</div>

<!-- Etichetta fissa -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">User Name</label>
  <input class="mdui-textfield-input" type="text" disabled />
</div>

<!-- Etichetta fluttuante -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" disabled />
</div>

Text Field multilinea

Sostituire il tag input di un Text Field a riga singola con un tag textarea lo trasforma in un Text Field multilinea. Il Text Field multilinea regolerà automaticamente la sua altezza in base al contenuto.

Esempio

<div class="mdui-textfield">
  <textarea class="mdui-textfield-input" placeholder="Description"></textarea>
</div>

<!-- Etichetta fissa -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">Subject</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- Etichetta fluttuante -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- Stato disabilitato -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Disabled</label>
  <textarea class="mdui-textfield-input" disabled></textarea>
</div>

Aggiungendo l'attributo rows a textarea, l'altezza del Text Field diventerà fissa.

Esempio

<div class="mdui-textfield">
  <textarea class="mdui-textfield-input" rows="4" placeholder="Message"></textarea>
</div>

Con testo di aiuto

Aggiungi l'elemento <div class="mdui-textfield-helper"></div> alla fine all'interno di <div class="mdui-textfield"></div> per aggiungere un testo di aiuto.

Esempio

<div class="mdui-textfield">
  <input type="email" class="mdui-textfield-input" placeholder="Email" />
  <div class="mdui-textfield-helper">Helper Text</div>
</div>

Con icona

Esempio

<div class="mdui-textfield">
  <i class="mdui-icon material-icons">email</i>
  <input class="mdui-textfield-input" type="email" placeholder="Email"/>
</div>

<!-- Etichetta fissa -->
<div class="mdui-textfield">
  <i class="mdui-icon material-icons">account_circle</i>
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" />
  <div class="mdui-textfield-helper">Helper Text</div>
</div>

<!-- Etichetta fluttuante, Text Field multilinea -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <i class="mdui-icon material-icons">textsms</i>
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- Stato disabilitato -->
<div class="mdui-textfield">
  <i class="mdui-icon material-icons">lock</i>
  <input class="mdui-textfield-input" type="text" placeholder="Disabled" disabled/>
</div>

Text Field espandibile

Esempio

<div class="mdui-textfield mdui-textfield-expandable">
  <button class="mdui-textfield-icon mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </button>
  <input class="mdui-textfield-input" type="text" placeholder="Search"/>
  <button class="mdui-textfield-close mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">close</i>
  </button>
</div>

<div class="mdui-textfield mdui-textfield-expandable mdui-float-right">
  <button class="mdui-textfield-icon mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </button>
  <input class="mdui-textfield-input" type="text" placeholder="Search"/>
  <button class="mdui-textfield-close mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">close</i>
  </button>
</div>

Funzioni

Validazione del modulo

mdui utilizza HTML5 per la validazione dei moduli. Aggiungi l'elemento <div class="mdui-textfield-error"></div> alla fine all'interno di <div class="mdui-textfield"></div> per aggiungere messaggi di errore.

Se sono inclusi sia un messaggio di errore che un testo di aiuto, l'elemento del testo di aiuto deve essere posizionato dopo l'elemento del messaggio di errore.

Esempio

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" required />
  <div class="mdui-textfield-error">Il nome utente non può essere vuoto</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" required />
  <div class="mdui-textfield-error">Formato email non valido</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Password</label>
  <input
    class="mdui-textfield-input"
    type="text"
    pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$$"
    required
  />
  <div class="mdui-textfield-error">La password deve contenere almeno 6 caratteri e includere lettere maiuscole e minuscole</div>
  <div class="mdui-textfield-helper">Inserire una password di almeno 6 caratteri con lettere maiuscole e minuscole</div>
</div>

Oltre alla validazione HTML5, è possibile utilizzare JavaScript per la validazione.

Aggiungi la classe .mdui-textfield-invalid ai Text Field che non superano la validazione e rimuovila dopo che è stata superata.

Esempio

<div class="mdui-textfield mdui-textfield-invalid">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" />
  <div class="mdui-textfield-error">Il nome utente esiste già</div>
</div>

Conteggio caratteri

Aggiungi l'attributo maxlength="" all'elemento input per limitare la lunghezza della riga. mdui aggiungerà automaticamente un conteggio dei caratteri in tempo reale nell'angolo in basso a destra del Text Field.

Esempio

<div class="mdui-textfield">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" maxlength="20" />
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" maxlength="60" />
  <div class="mdui-textfield-error">Formato email non valido</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input" maxlength="140"></textarea>
</div>

Text Field generati dinamicamente

Se il tuo Text Field è generato dinamicamente, è necessario chiamare mdui.mutation() per l'inizializzazione.

Se modifichi dinamicamente il contenuto del Text Field, devi chiamare il metodo mdui.updateTextFields() per reinizializzarlo. Questo metodo può accettare come parametro un selettore CSS con la classe .mdui-textfield, un elemento DOM o un array di elementi DOM, indicando che verranno reinizializzati solo i Text Field specificati. Se non viene passato alcun parametro, verranno reinizializzati tutti i Text Field nella pagina.

Elenco classi CSS

Nome classe	Descrizione
`.mdui-textfield`	Definisce un Text Field.
`.mdui-textfield-floating-label`	Definisce un Text Field con etichetta fluttuante.
`.mdui-textfield-label`	Definisce l'etichetta del Text Field.
`.mdui-textfield-input`	Definisce l'input del Text Field.
`.mdui-textfield-error`	Definisce il messaggio di errore della validazione.
`.mdui-textfield-helper`	Definisce il testo di aiuto del Text Field.

Pannello pieghevole

Controlli di selezione