SelectSelect

El componente Select muestra varias opciones en un menú desplegable para que el usuario elija rápidamente la opción que necesita.

Esta página describe principalmente el uso del componente <mdui-select>. Para el uso de los elementos del menú desplegable, consulta <mdui-menu-item>.

Uso

Importa los componentes cuando los necesites:

import 'mdui/components/select.js';
import 'mdui/components/menu-item.js';

Importa los tipos TypeScript cuando los necesites:

import type { Select } from 'mdui/components/select.js';
import type { MenuItem } from 'mdui/components/menu-item.js';

Uso:

Elemento 1

Elemento 2

<mdui-select value="item-1">
  <mdui-menu-item value="item-1">Elemento 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Elemento 2</mdui-menu-item>
</mdui-select>

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

Elemento 1

Elemento 2

Elemento 1

Elemento 2

<mdui-select value="item-1" icon="search" end-icon="mic">
  <mdui-menu-item value="item-1">Elemento 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Elemento 2</mdui-menu-item>
</mdui-select>

<br/><br/>

<mdui-select value="item-1">
  <mdui-menu-item value="item-1">Elemento 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Elemento 2</mdui-menu-item>
  <mdui-button-icon slot="icon" icon="search"></mdui-button-icon>
  <mdui-button-icon slot="end-icon" icon="mic"></mdui-button-icon>
</mdui-select>

Fuente

Los atributos prefix y suffix permiten añadir texto a la izquierda y derecha del Select. 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 Select está enfocado o tiene un valor.

Elemento 1

Elemento 2

Elemento 1

Elemento 2

$ /100

<mdui-select value="item-1" prefix="$" suffix="/100">
  <mdui-menu-item value="item-1">Elemento 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Elemento 2</mdui-menu-item>
</mdui-select>

<br/><br/>

<mdui-select value="item-1">
  <mdui-menu-item value="item-1">Elemento 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Elemento 2</mdui-menu-item>
  <span slot="prefix" style="color: blue">$</span>
  <span slot="suffix" style="color: blue">/100</span>
</mdui-select>

Fuente

API

Propiedades

Atributo	Propiedad	Tipo	Predeterminado
`variant`	`variant`	`'filled' \| 'outlined'`	`'filled'`
Estilo del Select. Los valores posibles son: `filled`: Select con color de fondo, efecto visual intenso `outlined`: Select con borde, efecto visual más suave
`multiple`	`multiple`	`boolean`	`false`
Indica si permite selección múltiple.
`name`	`name`	`string`	`''`
Nombre del Select, que se enviará con los datos del formulario.
`value`	`value`	`string \| string[]`	`''`
Valor del Select, que se enviará junto con los datos del formulario. Si no se especifica el atributo `multiple`, este valor es una cadena; si se especifica `multiple`, este valor es un array de cadenas. El atributo HTML solo puede establecer un valor de cadena; si necesita establecer un valor de array, debe hacerlo mediante una propiedad de JavaScript.
	`defaultValue`	`string \| string[]`	`''`
Valor seleccionado 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 Select. También se puede establecer mediante `slot="helper"`.
`clearable`	`clearable`	`boolean`	`false`
Indica si se puede borrar el valor del Select.
`clear-icon`	`clearIcon`	`string`	-
Nombre del icono de Material Icons para el botón de borrar que se muestra a la derecha del Select cuando es borrable. También se puede establecer mediante `slot="clear-icon"`.
`placement`	`placement`	`'auto' \| 'bottom' \| 'top'`	`'auto'`
Posición del Select. Los valores posibles son: `auto`: Determinar posición automáticamente `bottom`: Ubicado abajo `top`: Ubicado arriba
`end-aligned`	`endAligned`	`boolean`	`false`
Indica si el texto está alineado a la derecha.
`prefix`	`prefix`	`string`	-
Texto de prefijo del Select. Solo se muestra cuando el Select está enfocado o tiene un valor. También se puede establecer mediante `slot="prefix"`.
`suffix`	`suffix`	`string`	-
Texto de sufijo del Select. Solo se muestra cuando el Select 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 Select. También se puede establecer mediante `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Nombre del icono de Material Icons para el icono de sufijo del Select. 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 Select 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 estado de solo lectura.
`disabled`	`disabled`	`boolean`	`false`
Indica si está deshabilitado.
`required`	`required`	`boolean`	`false`
Indica si es obligatorio completar este campo al enviar el formulario.
	`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.
`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
`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 cambia el valor seleccionado.
`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 valor del Select llamando a `event.preventDefault()`.

Slots

Nombre
(predeterminado)
Elementos `<mdui-menu-item>`.
`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.
`helper`
Texto de ayuda en la parte inferior.

CSS Parts

Nombre
`chips`
Contenedor para los chips correspondientes a los valores seleccionados en selección múltiple.
`chip`
Chip correspondiente a cada valor seleccionado en selección múltiple.
`chip__button`
Elemento `<button>` dentro del chip.
`chip__label`
Texto dentro del chip.
`chip__delete-icon`
Icono de eliminar dentro del chip.
`text-field`
Campo de texto, es decir, el elemento `<mdui-text-field>`.
`text-field__container`
Contenedor del campo de texto dentro de text-field.
`text-field__icon`
Icono izquierdo dentro de text-field.
`text-field__end-icon`
Icono derecho dentro de text-field.
`text-field__error-icon`
Icono derecho en estado de error de validación dentro de text-field.
`text-field__prefix`
Texto izquierdo dentro de text-field.
`text-field__suffix`
Texto derecho dentro de text-field.
`text-field__label`
Texto de la etiqueta dentro de text-field.
`text-field__input`
Elemento `<input>` dentro de text-field.
`text-field__clear-button`
Botón de borrar dentro de text-field.
`text-field__clear-icon`
Icono dentro del botón de borrar en text-field.
`text-field__supporting`
Contenedor de información auxiliar inferior dentro de text-field, que incluye helper y error.
`text-field__helper`
Texto de ayuda inferior dentro de text-field.
`text-field__error`
Texto de descripción de error inferior dentro de text-field.
`menu`
Menú desplegable, es decir, el elemento `<mdui-menu>`.

Capítulo anterior

RangeSlider Range Slider

Capítulo siguiente

SegmentedButton Botón segmentado

SelectSelect

Uso

Ejemplos

Forma

Soporte de selección múltiple

Texto de ayuda

Modo de solo lectura

Modo deshabilitado

Limpiable

Posición del menú desplegable

Texto alineado a la derecha

Texto e iconos delante/detrás

API

Propiedades

Métodos

Eventos

Slots

CSS Parts