TextFieldCampo de texto

El campo de texto permite introducir texto en la página y suele usarse en formularios y diálogos.

Uso

Importa el componente cuando lo necesites:

import 'mdui/components/text-field.js';

Importa el tipo TypeScript cuando lo necesites:

import type { TextField } from 'mdui/components/text-field.js';

Uso:

<mdui-text-field label="Campo de texto"></mdui-text-field>

El atributo helper define el texto de ayuda en la parte inferior del campo de texto. También puedes usar el slot helper para definirlo. Añade helper-on-focus para mostrar el texto de ayuda solo cuando el campo de texto está enfocado.

Texto de apoyo

<mdui-text-field label="Campo de texto" helper="Texto de apoyo"></mdui-text-field>

<mdui-text-field label="Campo de texto">
  <span slot="helper" style="color: blue">Texto de apoyo</span>
</mdui-text-field>

<mdui-text-field label="Campo de texto" helper="Texto de apoyo" helper-on-focus></mdui-text-field>

Fuente

Limpiable

Con el atributo clearable, aparece un botón para borrar el contenido cuando el campo tiene valor.

<mdui-text-field clearable label="Campo de texto" value="Texto de entrada"></mdui-text-field>

Fuente

Texto alineado a la derecha

Con el atributo end-aligned puedes alinear el texto a la derecha.

<mdui-text-field end-aligned label="Campo de texto" value="Texto de entrada"></mdui-text-field>

Fuente

Texto e iconos delante/detrás

Los atributos icon y end-icon permiten añadir iconos de Material Icons a la izquierda y derecha del campo de texto. También puedes añadir elementos a la izquierda y derecha mediante los slots icon y end-icon.

<mdui-text-field icon="search" end-icon="mic" label="Campo de texto"></mdui-text-field>

<br/><br/>

<mdui-text-field label="Campo de texto">
  <mdui-button-icon slot="icon" icon="search"></mdui-button-icon>
  <mdui-button-icon slot="end-icon" icon="mic"></mdui-button-icon>
</mdui-text-field>

Fuente

Los atributos prefix y suffix permiten añadir texto a la izquierda y derecha del campo de texto. También puedes añadir elementos de texto a la izquierda y derecha mediante los slots prefix y suffix. Estos textos solo se muestran cuando el campo de texto está enfocado o tiene un valor.

$ /100

<mdui-text-field prefix="$" suffix="/100" label="Campo de texto"></mdui-text-field>

<br/><br/>

<mdui-text-field label="Campo de texto">
  <span slot="prefix" style="color: blue">$</span>
  <span slot="suffix" style="color: blue">/100</span>
</mdui-text-field>

Fuente

Modo de solo lectura

El atributo readonly define el campo de texto en modo de solo lectura.

<mdui-text-field readonly label="Campo de texto" value="Texto de entrada"></mdui-text-field>

Fuente

Estado deshabilitado

El atributo disabled deshabilita el campo de texto.

<mdui-text-field disabled label="Campo de texto" value="Texto de entrada"></mdui-text-field>

Fuente

Campo de texto multilínea

El atributo rows define el número de filas del campo de texto multilínea.

<mdui-text-field rows="3" label="Campo de texto"></mdui-text-field>

Fuente

También puedes añadir el atributo autosize para que el campo de texto ajuste automáticamente su altura según la longitud del contenido. Los atributos min-rows y max-rows para especificar el número mínimo y máximo de filas al ajustar la altura automáticamente.

<mdui-text-field autosize label="Campo de texto"></mdui-text-field>

<br/><br/>

<mdui-text-field autosize min-rows="2" max-rows="5" label="Campo de texto"></mdui-text-field>

Fuente

Contador de caracteres

Cuando estableces el número máximo de caracteres con el atributo maxlength, puedes añadir el atributo counter para mostrar el contador de caracteres debajo del campo de texto.

<mdui-text-field maxlength="20" counter label="Campo de texto"></mdui-text-field>

Fuente

Campo de contraseña

Cuando type="password", añade el atributo toggle-password para mostrar un botón que alterna la visibilidad de la contraseña en el lado derecho del campo de texto.

<mdui-text-field type="password" toggle-password label="Campo de texto"></mdui-text-field>

Fuente

API

Propiedades

Atributo	Propiedad	Tipo	Predeterminado
`variant`	`variant`	`'filled' \| 'outlined'`	`'filled'`
Variante del campo de texto. Por defecto es `filled`. Los valores posibles son: `filled`: Campo de texto con color de fondo, efecto visual intenso `outlined`: Campo de texto con borde, efecto visual más suave
`type`	`type`	`'text' \| 'number' \| 'password' \| 'url' \| 'email' \| 'search' \| 'tel' \| 'hidden' \| 'date' \| 'datetime-local' \| 'month' \| 'time' \| 'week'`	`'text'`
Tipo de entrada del campo de texto. Por defecto es `text`. Los valores posibles son: `text`: Valor por defecto. Campo de texto `number`: Solo se pueden ingresar números. En dispositivos con teclado dinámico, se mostrará un teclado numérico `password`: Para ingresar contraseñas, su valor se oculta `url`: Para ingresar URL, valida el formato de la URL. En dispositivos con teclado dinámico, tiene un teclado correspondiente `email`: Para ingresar direcciones de correo electrónico, valida el formato del correo. En dispositivos con teclado dinámico, tiene un teclado correspondiente `search`: Para cuadros de búsqueda. En dispositivos con teclado dinámico, el icono de Enter se convierte en un icono de búsqueda `tel`: Para ingresar números de teléfono. En dispositivos con teclado dinámico, se mostrará un teclado numérico telefónico `hidden`: Oculta el control, pero su valor aún se envía al servidor `date`: Control para ingresar fecha (año, mes, día, sin hora). Cuando está activado en navegadores compatibles, abre un selector de fecha o un selector de rueda numérica de año, mes y día `datetime-local`: Control para ingresar fecha y hora, sin zona horaria. Cuando está activado en navegadores compatibles, abre un selector de fecha o un selector de rueda numérica de año, mes y día `month`: Control para ingresar año y mes, sin zona horaria `time`: Control para ingresar hora, sin zona horaria `week`: Control para ingresar una fecha compuesta por año y número de semana, sin zona horaria
`name`	`name`	`string`	`''`
Nombre del campo de texto, que se enviará con los datos del formulario.
`value`	`value`	`string`	`''`
Valor del campo de texto, que se enviará con los datos del formulario.
	`defaultValue`	`string`	`''`
Valor por defecto. Al restablecer el formulario, se restaurará a este valor. Esta propiedad solo se puede establecer mediante una propiedad de JavaScript.
`label`	`label`	`string`	-
Texto de la etiqueta.
`placeholder`	`placeholder`	`string`	-
Texto de marcador de posición.
`helper`	`helper`	`string`	-
Texto de ayuda en la parte inferior del campo de texto. También se puede establecer mediante `slot="helper"`.
`helper-on-focus`	`helperOnFocus`	`boolean`	`false`
Indica si el texto de ayuda solo se muestra cuando el campo recibe el foco.
`clearable`	`clearable`	`boolean`	`false`
Indica si se puede borrar el contenido del campo de texto.
`clear-icon`	`clearIcon`	`string`	-
Nombre del icono de Material Icons para el botón de borrar que se muestra a la derecha del campo de texto cuando es borrable. También se puede establecer mediante `slot="clear-icon"`.
`end-aligned`	`endAligned`	`boolean`	`false`
Indica si el texto está alineado a la derecha.
`prefix`	`prefix`	`string`	-
Texto de prefijo del campo de texto. Solo se muestra cuando el campo de texto está enfocado o tiene un valor. También se puede establecer mediante `slot="prefix"`.
`suffix`	`suffix`	`string`	-
Texto de sufijo del campo de texto. Solo se muestra cuando el campo de texto está enfocado o tiene un valor. También se puede establecer mediante `slot="suffix"`.
`icon`	`icon`	`string`	-
Nombre del icono de Material Icons para el icono de prefijo del campo de texto. También se puede establecer mediante `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Nombre del icono de Material Icons para el icono de sufijo del campo de texto. También se puede establecer mediante `slot="end-icon"`.
`error-icon`	`errorIcon`	`string`	-
Nombre del icono de Material Icons que se muestra a la derecha del campo de texto cuando falla la validación del campo del formulario. También se puede establecer mediante `slot="error-icon"`.
`form`	`form`	`string`	-
Elemento `<form>` asociado. El valor de esta propiedad debe ser el `id` de un elemento `<form>` en la misma página. Si no se especifica esta propiedad, el elemento debe ser hijo de un elemento `<form>`. Con esta propiedad, puedes colocar el elemento en cualquier lugar de la página, no solo como hijo de un elemento `<form>`.
`readonly`	`readonly`	`boolean`	`false`
Indica si está en modo de solo lectura.
`disabled`	`disabled`	`boolean`	`false`
Indica si el campo de entrada está deshabilitado.
`required`	`required`	`boolean`	`false`
Indica si es obligatorio completar este campo al enviar el formulario.
`rows`	`rows`	`number`	-
Número fijo de líneas mostradas en el campo de texto.
`autosize`	`autosize`	`boolean`	`false`
Indica si la altura del campo de texto se ajusta automáticamente según el contenido.
`min-rows`	`minRows`	`number`	-
Cuando `autosize` es `true`, el número mínimo de líneas del campo de texto.
`max-rows`	`maxRows`	`number`	-
Cuando `autosize` es `true`, el número máximo de líneas del campo de texto.
`minlength`	`minlength`	`number`	-
Número mínimo de caracteres permitidos.
`maxlength`	`maxlength`	`number`	-
Número máximo de caracteres permitidos.
`counter`	`counter`	`boolean`	`false`
Indica si se muestra un contador de caracteres. Solo tiene efecto cuando se especifica `maxlength`.
`min`	`min`	`number`	-
Cuando `type` es `number`, el valor mínimo permitido.
`max`	`max`	`number`	-
Cuando `type` es `number`, el valor máximo permitido.
`step`	`step`	`number`	-
Cuando `type` es `number`, el incremento o decremento del valor.
`pattern`	`pattern`	`string`	-
Expresión regular para la validación del formulario.
`toggle-password`	`togglePassword`	`boolean`	`false`
Cuando `type` es `password`, al definir esta propiedad se agrega un botón para alternar entre mostrar y ocultar la contraseña.
`show-password-icon`	`showPasswordIcon`	`string`	-
Icono de Material Icons para el botón de alternancia de contraseña, que se muestra cuando la contraseña se muestra. También se puede establecer mediante `slot="show-password-icon"`.
`hide-password-icon`	`hidePasswordIcon`	`string`	-
Icono de Material Icons para el botón de alternancia de contraseña, que se muestra cuando la contraseña está oculta. También se puede establecer mediante `slot="hide-password-icon"`.
`autocapitalize`	`autocapitalize`	`'none' \| 'sentences' \| 'words' \| 'characters'`	-
Atributo no estándar de iOS, utilizado para controlar si se debe capitalizar automáticamente la primera letra del texto. Válido en iOS 5 y versiones posteriores. Los valores posibles son: `none`: Deshabilitar la capitalización de la primera letra `sentences`: Capitalizar la primera letra de las oraciones `words`: Capitalizar la primera letra de las palabras `characters`: Poner en mayúsculas todas las letras
`autocorrect`	`autocorrect`	`string`	-
Atributo `autocorrect` del elemento `input`.
`autocomplete`	`autocomplete`	`string`	-
Atributo `autocomplete` del elemento `input`.
`enterkeyhint`	`enterkeyhint`	`'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'`	-
Atributo `enterkeyhint` del elemento `input`, utilizado para personalizar el texto o icono mostrado en la tecla Enter del teclado virtual. El efecto de visualización depende del dispositivo y el idioma del usuario. Los valores posibles son: `enter`: Insertar nueva línea `done`: Completar la entrada, cerrar el teclado virtual `go`: Navegar al objetivo del texto ingresado `next`: Moverse al siguiente campo de entrada `previous`: Moverse al campo de entrada anterior `search`: Navegar a los resultados de búsqueda `send`: Enviar el mensaje de texto
`spellcheck`	`spellcheck`	`boolean`	`false`
Indica si se habilita la revisión ortográfica.
`inputmode`	`inputmode`	`'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'`	-
Atributo `inputmode` del elemento `input`, utilizado para personalizar el tipo de teclado virtual. Los valores posibles son: `none`: Sin teclado virtual. Útil cuando se necesita implementar un control de entrada de teclado propio `text`: Teclado de entrada de texto estándar `decimal`: Teclado de entrada decimal, además de números puede tener punto decimal `.` o coma de miles `,` `numeric`: Muestra un teclado numérico del 0 al 9 `tel`: Teclado numérico telefónico, que incluye números del 0 al 9, asterisco `*` o numeral `#` `search`: Teclado virtual optimizado para la entrada de búsqueda, el botón de enviar generalmente muestra `search` o “Buscar” `email`: Teclado virtual optimizado para la entrada de direcciones de correo electrónico, generalmente tiene teclas como `@ .` `url`: Teclado virtual optimizado para la entrada de URL, generalmente tiene teclas como `. / #`
	`validity`	`ValidityState`	-
Objeto de estado de validación del formulario, véase `ValidityState`.
	`validationMessage`	`string`	-
Si falla la validación del formulario, esta propiedad contendrá un mensaje informativo. Si la validación es correcta, esta propiedad será una cadena vacía.
	`valueAsNumber`	`number`	-
Obtiene el valor actual y lo convierte al tipo `number`; o establece un valor de tipo `number`. Si el valor no se puede convertir al tipo `number`, devuelve `NaN`.
`autofocus`	`autofocus`	`boolean`	`false`
Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
`tabindex`	`tabIndex`	`number`	-
Orden del elemento al navegar con la tecla Tab.

Métodos

Nombre	Parámetros	Valor de retorno
`select`		`void`
Selecciona el texto en el campo de texto.
`setSelectionRange`	`start: number` `end: number` `direction: 'forward' \| 'backward' \| 'none'`	`void`
Selecciona un rango específico de contenido en el campo de texto.
`setRangeText`	`replacement: string` `start: number` `end: number` `selectMode: 'select' \| 'start' \| 'end' \| 'preserve'`	`void`
Reemplaza el texto de un rango específico en el campo de texto con un nuevo texto.
`checkValidity`		`boolean`
Comprueba si el campo del formulario pasa la validación. Si falla, devuelve `false` y dispara el evento `invalid`; si la pasa, devuelve `true`.
`reportValidity`		`boolean`
Comprueba si el campo del formulario pasa la validación. Si falla, devuelve `false` y dispara el evento `invalid`; si la pasa, devuelve `true`. Si la validación falla, también muestra un mensaje de error en el componente.
`setCustomValidity`	`message: string`	`void`
Establece un mensaje de error personalizado. Si este mensaje no está vacío, indica que el campo no ha pasado la validación.
`click`		`void`
Simula un clic del ratón en el elemento.
`focus`	`options: FocusOptions` (Opcional)	`void`
Establece el foco en el elemento actual. Puede pasarse un objeto como parámetro con las siguientes propiedades: `preventScroll`: Por defecto, cuando el elemento recibe el foco, la página se desplaza hasta mostrarlo. Si no quiere que la página se desplace, defina esta propiedad como `true`.
`blur`		`void`
Quita el foco del elemento actual.

Eventos

Nombre
`focus`
Se dispara cuando recibe el foco.
`blur`
Se dispara cuando pierde el foco.
`change`
Se dispara cuando el valor del campo de texto cambia y se pierde el foco.
`input`
Se dispara cuando el valor del campo de texto cambia.
`invalid`
Se dispara cuando falla la validación del campo del formulario.
`clear`
Se dispara al hacer clic en el botón de borrar generado por el atributo `clearable`. Se puede evitar que se borre el contenido del campo de texto llamando a `event.preventDefault()`.

Slots

Nombre
`icon`
Icono izquierdo.
`end-icon`
Icono derecho.
`error-icon`
Icono derecho en estado de error de validación.
`prefix`
Texto izquierdo.
`suffix`
Texto derecho.
`clear-button`
Botón de borrar.
`clear-icon`
Icono dentro del botón de borrar.
`toggle-password-button`
Botón de alternancia del estado de visualización de la contraseña.
`show-password-icon`
Icono dentro del botón de alternancia cuando la contraseña se muestra.
`hide-password-icon`
Icono dentro del botón de alternancia cuando la contraseña está oculta.
`helper`
Texto de ayuda en la parte inferior.

CSS Parts

Nombre
`container`
Contenedor del campo de texto.
`icon`
Icono izquierdo.
`end-icon`
Icono derecho.
`error-icon`
Icono derecho en estado de error de validación.
`prefix`
Texto izquierdo.
`suffix`
Texto derecho.
`label`
Texto de la etiqueta superior.
`input`
Elemento `<input>` o `<textarea>` interno.
`clear-button`
Botón de borrar.
`clear-icon`
Icono dentro del botón de borrar.
`toggle-password-button`
Botón de alternancia del estado de visualización de la contraseña.
`show-password-icon`
Icono dentro del botón de alternancia cuando la contraseña se muestra.
`hide-password-icon`
Icono dentro del botón de alternancia cuando la contraseña está oculta.
`supporting`
Contenedor de información auxiliar inferior, que incluye helper, error, counter.
`helper`
Texto de ayuda inferior.
`error`
Texto de descripción de error inferior.
`counter`
Contador de caracteres en la parte inferior derecha.

Capítulo anterior

Tabs Tab

Capítulo siguiente

Tooltip Tooltip

TextFieldCampo de texto

Uso

Ejemplos

Forma

Texto de ayuda

Limpiable

Texto alineado a la derecha

Texto e iconos delante/detrás

Modo de solo lectura

Estado deshabilitado

Campo de texto multilínea

Contador de caracteres

Campo de contraseña

API

Propiedades

Métodos

Eventos

Slots

CSS Parts