El nuevo mdui 2 basado en Material Design 3 y Web Components ya está disponible. Consulta la documentación de mdui 2 ahora.

Campo de texto

Los campos de texto suelen utilizarse en formularios. Los campos de texto de mdui ofrecen funciones como recuento de caracteres y validación de formularios.

Se pueden combinar con el sistema de diseño en cuadrícula para crear diseños de formularios.

Modo de uso

Se inicializan automáticamente al cargar la página. Para los campos de texto generados dinámicamente, debes llamar a mdui.mutation() para inicializarlos.

Color

Usar color de acento.

Lectura relacionada

Pautas de diseño de Material Design: componentes - Campo de texto

Estilo

Campo de texto de una sola línea

Este es un ejemplo muy simple de campo de texto:

Ejemplo

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

Etiqueta fija

Ejemplo

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

Etiqueta flotante

Ejemplo

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

Estado deshabilitado

Añade el atributo disabled al elemento .mdui-textfield-input para deshabilitar el campo de texto.

Ejemplo

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

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

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

Campo de texto multilínea

Sustituye la etiqueta input de un campo de texto de una sola línea por una etiqueta textarea para crear un campo de texto multilínea. El campo de texto multilínea ajustará automáticamente su altura según el contenido.

Ejemplo

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

<!-- Etiqueta fija -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">Subject</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

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

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

Añade el atributo rows al textarea para fijar la altura del campo de texto.

Ejemplo

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

Con texto de ayuda

Añade un elemento <div class="mdui-textfield-helper"></div> al final de <div class="mdui-textfield"></div> para mostrar texto de ayuda.

Ejemplo

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

Con icono

Ejemplo

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

<!-- Etiqueta fija -->
<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>

<!-- Etiquetas flotantes y campos de texto multilínea -->
<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>

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

Campo de texto desplegable

Ejemplo

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

Función

Validación de formularios

mdui utiliza la validación de formularios de HTML5. Añade un elemento <div class="mdui-textfield-error"></div> al final de <div class="mdui-textfield"></div> para mostrar un mensaje de error.

Si incluyes tanto el mensaje de error como el texto de ayuda, el elemento de ayuda debe ir después del elemento de error.

Ejemplo

<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">El nombre de usuario no puede estar vacío</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">El formato del correo electrónico es incorrecto</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 contraseña debe tener al menos 6 caracteres y contener letras mayúsculas y minúsculas</div>
  <div class="mdui-textfield-helper">Introduce una contraseña de al menos 6 caracteres que incluya letras mayúsculas y minúsculas</div>
</div>

Además de la validación de formularios de HTML5, también puedes realizar la validación con JavaScript.

Añade la clase .mdui-textfield-invalid al campo de texto cuando la validación falle y elimínala cuando sea correcta.

Ejemplo

<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">El nombre de usuario ya existe</div>
</div>

Recuento de caracteres

Añade el atributo maxlength="" al elemento input para limitar la longitud de la entrada; mdui añadirá automáticamente una cuenta en tiempo real en la esquina inferior derecha del campo de texto.

Ejemplo

<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">El formato del correo electrónico es incorrecto</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>

Campo de texto generado dinámicamente

Si tu campo de texto se genera dinámicamente, debes llamar a mdui.mutation() para inicializarlo.

Si cambias dinámicamente el contenido del campo de texto, debes llamar al método mdui.updateTextFields() para reinicializarlo. Este método puede aceptar como parámetro un selector CSS con la clase .mdui-textfield, un elemento DOM o un array de elementos DOM para reinicializar solo los campos de texto indicados. Si no se pasa ningún parámetro, se reinicializarán todos los campos de texto de la página.

Lista de clases CSS

Nombre de clase	Descripción
`.mdui-textfield`	Definir un campo de texto.
`.mdui-textfield-floating-label`	Definir un campo de texto con etiqueta flotante.
`.mdui-textfield-label`	Definir la etiqueta del campo de texto.
`.mdui-textfield-input`	Definir el cuadro de entrada del campo de texto.
`.mdui-textfield-error`	Definir el mensaje de error de la validación del formulario.
`.mdui-textfield-helper`	Definir el texto de ayuda del campo de texto.

Panel de expansión

Controles de selección